2021년 6월 5일 cmarket 리덕스 스프린트를 위한 redux 흡수하기(뇌피셜 + 튜토리얼/ 공식문서 훑어보기)

리덕스 뇌피셜

 

component 속 eventHandler 함수(ex : handleClick or handleQuantityChange or handleDelete 등...) 안에서 dispatch()에 본 component에서 set해야하는 state에 해당하는 action을 기재한다.

 

action에는 타입(후에 reducer에서 타입으로 case를 구분)과 reducer로 전달하는 매개변수(state를 변화시키는 재료들)가 담겨있다.  : 함수의 매개변수를 전달하는 느낌

 

reducer에는 state를 변화시키는 실질적인 함수들이 들어가 있다. 원래 eventHandler함수의 {}바디에 해당하는 것들이 저장되어 있는 듯. : 매개변수를 가지고 실제로 현재의 state를 변화시키는 함수 같은 느낌

 

질문? 왜 state가 reducers 폴더에 있지? 원래대로라면 store에 있어야되는거 아닌가

 

state를 변경해야하는 eventHandler 함수가 있는 component에서 useSelector로 state를 불러온다. 

 

리덕스 튜토리얼에서 뽑아온 내용

React Redux Tutorial for Beginners [2019] - RWieruch

 

Basically, Reducers pick up the information from Actions and "reduce" the information to a new state, along with the old state, that is stored in the Store. When state in the Store is changed, the View can act on this by subscribing to the Store.

 

So why is it called Redux? Because it combines the two words Reducer and Flux.

 

Action(s)

An action in Redux is a JavaScript object. It has a type and an optional payload. The type is often referred to as action type. While the type is a string literal, the payload can be anything from a string to an object.

 

Executing an action is called dispatching in Redux. You can dispatch an action to alter the state in the Redux store. You only dispatch an action when you want to change the state. The dispatching of an action can be triggered in your View.

 

Reducer(s)

 A reducer is a pure function. it is only an input/output operation.

 

A reducer has two inputs: state and action. The state is always the global state object from the Redux store. The action is the dispatched action with a type and optional payload. The reducer reduces - that explains the naming - the previous state and incoming action to a new state.

 

It always returns a newState object without mutating the incoming prevState object.

 

If there is not such a case, you return the unchanged state by default.

function reducer(state, action) {
  switch(action.type) {
    case 'TODO_ADD' : {
      // do something and return new state
    }
    case 'TODO_TOGGLE' : {
      // do something and return new state
    }
    default : return state;
  }
}

 

Redux Store

 

The createStore function takes one mandatory argument: a reducer. 

 

In addition, the createStore takes a second optional argument: the initial state.(useState()의 초기값 같은 것인가?)

 

how to dispatch an action ? store.dispatch()

 

how to get the global state from the store? store.getState()

 

how to subscribe (and unsubscribe) to the store in order to listen (and unlisten) for updates?

const unsubscribe = store.subscribe(() => {
  console.log(store.getState());
});
 
unsubscribe();

 

위의 부분들을 useDispatch, useSelector로 대체하여 쓸 수 있는듯 하다.