[Frontend/React] 25. 리덕스 사용 팁

리듀서에서만 관리하는 상태값

리덕스를 사용할 때, 상태값을 추가를 하면 액션도 추가해야하고 액션 크리에이터도 추가해야합니다. 이 과정이 조금 번거롭습니다. 만약 추가하려는 값이 리듀서에서만 간단하게 관리하는 상태값이라면 좀 더 간편하게 작성할 수 있는 방법이 있습니다.

 

기존에는 각 상태값을 변경하는 액션인 SET_XXX 와 액션 크리에이트인 setXXX() 함수를 한개씩 만들어서 사용해야 했습니다. 하지만 아래와같이 별도의 공통함수를 만들면 좀 더 간편하게 사용할 수 있습니다.

 

// 공통 함수
function createSetValueAction(type) {
  return (key, value) => ({ type, key, value });
}
function setValueReducer(state, action) {
  state[action.key] = action.value;
}

// 액션, 액션 크리에이터
const SET_VALUE = 'horong/SET_VALUE';
const setValue = createSetValueAction(SET_VALUE);

// 리듀서
function reducer = createReducer(INITIAL_STATE, {
  [SET_VALUE]: setValueRecucer,
  // ...
});

// 컴포넌트 (상태값을 저장할 이름과 값을 입력)
dispatch(setValue('key', value));

 

이제 상태값 변경을 위해 값을 추가하려면 INITIAL_STATE 에 초기값을 추가한 다음 바로 setValue 함수를 사용하면 되기 때문에 훨씬 간편하게 코드를 작성할 수 있습니다. 위와같은 방법으로 setValues 를 작성할 수도 있고, removeValue 같은 함수도 만들어서 사용하실 수 있습니다.

 

---

 

액션과 리듀서 코드의 분리

기존에는 액션, 액션크리에이터, 리듀서 코드를 한 곳에 모아두고 설명을 해 왔습니다. 하지만 프로젝트가 커지만 한 파일에 다 작성하기 힘들기 때문에 아래와 같이 영역별로 분리해서 사용하는 것을 추천합니다.

 

action.js - 액션, 액션크리에이터

여기에서는 추가적으로 액션 함수를 객체로 변경하여 묶어두는 것을 추천합니다.

 

// 액션, 액션크리에이터
export const types = {
  SET_VALUE: 'common/SET_VALUE',
  SET_XXX: 'thisComponent/SET_XXX',
}

export const actions = {
  setValue: createSetValueAction(SET_VALUE),
  setXXX: v => ({ type: 'XXX', data })
}

 

reducer.js - 리듀서

 

// 리듀서
function reducer = createReducer(INITIAL_STATE, {
  [SET_VALUE]: setValueRecucer,
  // ...
});

 

reducer-helper.js - 리듀서 상태변경 함수

 

 

// 공통 함수
function createSetValueAction(type) {
  return (key, value) => ({ type, key, value });
}
function setValueReducer(state, action) {
  state[action.key] = action.value;
}

 

 

 

 

---

출처 : 실전 리액트 프로그리맹 - 인프런 (추천합니다 !!)

실전 리액트 프로그래밍 - 인프런