기본적인 React + Redux 사용법

진행 순서

1. 버튼클릭

ComponentB안에있는 버튼을 클릭한다. 이 버튼에는 클릭시 action을 dispatch하는 이벤트가 걸려있다.

2. reducer에게 action보내기

내가 만든 action이 store를 통해 reducer에게 보내진다. store를 얻어서 직접 store.dispatch( myAction ) 이렇게 호출할 수 도 있지만, 여러가지 예외처리 혹은 효율성의 이유로 react-redux 모듈을 사용해 store와 내 컴포넌트를 connect시키고 아래와 같이 간접적으로(?) 호출하는게 더 낫다.

const MyAction = (value) => dispatch => {
  dispatch({
    type: MY_ACTION_TYPE,
    payload: value
  });
}


class ComponentB extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ...
    }
  }

  handleButtonClick() {
    let someValue = ...;
    this.props.MyAction(someValue);
  }

  async componentDidMount() {
    ...
  }

  render() {
    ...
    return (
      <div>
        ...
      </div>
    );
  }
}

function mapStateToProps(state, ownProps) {
  ...
  return {
    ...
  };
}

export default connect(mapStateToProps, { MyAction })(ComponentB);

3. reducer처리

reducer는 들어온 action을 바탕으로 기존의 state에 action.payload를 더해서 새로운 state를 만들어내는 역할을 한다. 이렇게 새롭게 만들어진 state를 Store의 state와 교체한다(업데이트). 예제 코드는 아래와 같다.

export default (state = {}, action) => {
  switch(action.type) {
    case MY_ACTION_TYPE:
      return Object.assign({}, state, {
        points: action.payload
      });

    case MY_ANOTHER_ACTION_TYPE:
      return Object.assign({}, state, {
        puzzleColonInfos: action.payload
      });

    default: return state;
  }
};

4. mapStateToProps() 호출

mapStateToProps함수는 새로 들어온 state에서 이 ComponentB에 필요한 state만 뽑아내는 필터링(?) 역할을 한다. 그렇게 뽑아낸 state를 return한다. 예제코드는 아래와 같다.

function mapStateToProps(state, ownProps) {
  return {
    ourTeam: ( state.loginData ? state.loginData.team : false ),
    laptime: state.laptime
  };
}

5. setState() -> render()

store는 ComponentBmapStateToProps()로 필터링된 state를 얻고 나서 그 state로 ComponentBsetState() 를 호출한다. 그러면 자동으로 ComponentBrender()가 호출되고 이 컴포넌트가 브라우저에 다시 그려진다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

Up Next:

[OS 2-1] 프로세스 관리

[OS 2-1] 프로세스 관리