[React/react-native] Redux 쉽게 사용하기 (2/3)

https://gran007.tistory.com/entry/Reactreact-native-Redux-%EC%89%BD%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-12

[React/react-native] Redux 쉽게 사용하기 (1/2)

 

이전 포스팅에서 이야기 했듯이 redux에 상태값을 추가하고 사용하는 방법은 보통 번거로울수 없다. 

 

 

redux만 사용한다면 그나마 낫지만 여기에 redux-thunk나 saga를 붙이면 redux의 상태 값 관리는 점점 더 복잡해진다.

 

 

따라서 redux의 구성과 사용을 최대한 단순화 시켜야할 필요가 있다.

 

 

redux를 간편하게 만들기 위해서는 먼저 상태값이 생길때마다 타입과 switch 문이 추가로 생성되는 공통부분을 제거해야 한다.

 

 

리듀서 단순화 작업

1. 상태값별 구분을 없애고 리듀서의 타입을 하나로 통일한다.

2. 수정이 필요한 상태값의 모음을 payload 오브젝트로 전달해서 리듀서 상태값에 덮어쓰기한다.

3. payload는 initalState에 부분집합으로 수정할 값만 던져주면 된다.

counter.js

const COUNT_REDUCER_TYPE = "COUNT_REDUCER_TYPE";

export const setCount = (payload) => { type: COUNT_REDUCER_TYPE, payload }

const initalState = {
  count: 0,
  username: 'not defined',
  timer: '00:00:00'
};

const counter = (state = initalState, action) => {
  switch (action.type) {
    case INCRESE:
      return {
        ...state,
        count: ...action.payload
      };
    default:
      return state;
  }
};

export default counter;

 

setCount를 사용할 때는 payload를 다음과 같이 변경해서 내가 수정을 원하는 값만을 전달할 수 있다.

// 한개 수정
dispatch(setCount({ count: 1 }));
dispatch(setCount({ username: 'dummyUser' }));
dispatch(setCount({ timer: '12:00:00' }));

// 두개 수정
dispatch(setCount({ count: 1, username: 'dummyUser' }));
dispatch(setCount({ username: 'dummyUser', timer: '12:00:00' }));
dispatch(setCount({ count: 1, username: 'dummyUser' }));
dispatch(setCount({ count: 1, timer: '12:00:00' }));

// 세개 수정
dispatch(setCount({ count: 1, username: 'dummyUser', timer: '12:00:00' }));

 

 

App.js

import { useSelector, useDispatch } from 'react-redux';
import { setCount } from './count';

// dispatch를 사용하기 위한 준비
const dispatch = useDispatch();

// store에 접근하여 state 가져오기
const { count } = useSelector(state => state.counter);

const increse = () => {
  // store에 있는 state 바꾸는 함수 실행
  dispatch(setCount({count: count + 1, username: 'dummyUser', timer: '12:00:00' }));
};

const App = () => {
  return (
    <div>
      {count}
      <button onClick={increse}>Add</button>
    </div>
  );
};

export default App;

 

 

이렇게 리듀서를 구성하면 reducer의 상태값이 추가되거나 수정되더라도 initialState외에 코드 수정이 일어나는 부분이 없고 외부에서도 setCount같은 리듀서 상태값 수정 함수 하나만 사용하면 되니 리듀서의 사용이 간편해 진다.

 

 

리듀서가 늘어나도 타입과 initialState, set함수의 이름만 다른 완전히 같은 구조로 리듀서를 생성하면 된다. 추가된 리듀서는 combineReducer에 다음과 같이 추가하면 된다.

import counter from './counter';
import userInfo from './userInfo';

const rootReducer = combineReducers({
  counter,
  userInfo,
});