react native에 immer, redux-thunk 적용

react native에 redux thunk와 immer를 적용했다.

redux의 reducer에서는 순수함수를 사용해야 한다. 순수함수는 다음과 같은 조건을 만족해야 한다고 한다.

• 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.

• 파라미터 외의 값에는 의존하면 안된다.

• 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.

• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.

상태 조작이 많다 보니 값을 직접 변경하거나 같은 변수를 넣어도 다른 값이 나오는 경우가 있었다.

let newObject = {...state};
newObject[id] = 0;

이런 식으로 스프레드 연산자로 복사해서 사용을 한 경우가 있었는데 이렇게 해도 state 상태의 값이 변경이 된다! 이렇게 사용하면 안된다!

그래서 불변상태를 유지하기 위해 immer를 도입했다. 생각보다 편리했다.

import produce from 'immer';
const newState = produce(state, draft) => {
    draft.element1.element2.element3 = 0;
}

이런 식으로 사용을 하면 된다.

redux-thunk도 역시 상태 변화를 할 때 사이드 이펙트를 피하기 위해서 도입했다. 미들웨어로 중간에 액션 함수에서 상태값을 받아서 변경을 할 수 있다.

export const update = (payload) => (dispatch, getState) => {
  const currentState = getState();
  const newState = produce(currentState, draft => {
    draft.text = payload.text;
  })
  dispatch({type: UPDATE, payload: newState});
}

container 나 component에서 mapDispatchToProps 로 마찬가지로 연결해 주면 된다.

const mapDispatchToProps = (dispatch) => ({
  update: (payload) => {
    dispatch(update(payload));
  },
});