리덕스 개념 정리

1) reducer

• createStore()의 첫번째 인자인 콜백함수로 state는 reducer내에서만 변경이 가능하다.

• reducer가 리턴 하는것은 state가 된다.

2) action

• reducer의 두번째 인자로 dispatch 함수로 action을 reducer에 보낸다.

• action은 객체이어야 한다. string이 될 수 없다.

const countModifier = (count = 0, action) => {
  console.log(count, action); // 1 {type: "MINUS"}
  if (action.type === "ADD") {
    return count + 1;
  } else if (action.type === "MINUS") {
    return count - 1;
  } else {
    return count;
  }
};

const countStore = createStore(countModifier); // countModifier => 리듀서

countStore.dispatch({ type: "ADD" }); // action
countStore.dispatch({ type: "MINUS" });

console.log(countStore.getState()); // 0

3) Subscribe

• store 내부의 state 변화 감지

store.subscribe(func); // state 변화를 감지하면 콜백함수 func 실행

4) Connect

• 컴포넌트를 store에 연결 시켜줌

function mapStateToProps(state) {
  return { toDos: state };
}

function mapDispatchToProps(dispatch) {
  return {
    addToDo: text => dispatch(actionCreators.addToDo(text))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

 // Home은 컴포넌트명, connect의 콜백 함수의 첫번째 매개변수는 state,  
// 두번째 매개변수는 props, 리턴값은 컴포넌트의 props가 된다.