React - Redux 3

리덕스를 사용하기 위해서는 state를 reducer에 넣고 reducer를 store에 저장했습니다. reducer에는 state를 수정하는 방법도 담겨져 있었습니다. 그렇다면 state를 하나가 아니라 여러 개를 만들고 싶다면 어떻게 해야될까요? 이에 대해 공부해보겠습니다.

 

 

1️⃣ state 하나 더 만드는 법

 

state를 처음에 만든 방법과 동일하게 만들면 됩니다. state를 변수에 담아서 하나 더 만들면 됩니다. useState 같은 것들을 사용하지 않아도 됩니다.

 

 

2️⃣  reducer 하나 더 만드는 법

 

state를 하나 더 만들었으니 reducer도 하나 더 만들어줘야 합니다. 리덕스에서 state와 reducer는 세트 개념이라고 생각하면 좋습니다. reducer를 하나 더 만드는 법도 역시 간단합니다. reducer를 하나 더 만들면 됩니다. 함수를 하나 더 만들어 주는 것이죠. 다만 이름은 reducer라고 하면 안 되고 (이미 있으니까요) 이름을 달리해서 만들면 됩니다.

 

그런데 reducer를 만들면 store에 넣어줘야 합니다. 그리고 현재 store에는 reducer가 하나 들어가 있습니다. 

 

let store = createStore(reducer)

 

이렇게 말이죠. 그렇다면 어떻게 또 다른 reducer를 넣어줄 수 있을까요? combineReducers을 사용해주면 됩니다.

 

 

combineReducers를 사용하기 위해서는 combineReducers를 import 해줘야 합니다.

 

import {combineReducers, createStore} from "redux";


//...


let store = createStore(combineReducers({reducer, reducer2}));

 

이렇게 createStore 안에 combineReducers( ) 를 써주고 그 안에 { } 오브젝트 형식으로 여러 개의 reducer를 넣어주면 됩니다. 

 

 

3️⃣  하나 더 만든 state 사용하는 법

 

리덕스 스토어에 저장된 state를 사용하기 위해서는 그것을 사용하는 컴포넌트에 가서 만든 함수에도 조금 조작이 필요합니다. 

 

function StateProps(state) {
  return {
    state: state
  }
}

 

state가 하나일 때 만들어 둔 함수가 이렇게 있습니다. 이제 state가 두 개가 됐을 때 어떻게 적어야 하는지 보겠습니다.

 

function stateProps(state) {
  return {
    state: state.reducer,
    alertOpen: state.reducer2
  };
}

 

첫번째 state에 대한 props를 만들어 줄 때 state.reducer를 사용하고 두번째 state에 대한 props를 만들어 줄 때 state.reducer2 를 붙여준 것을 확인할 수 있습니다. 지금 파라미터로 들어온 state에는 store에 담긴 state 두 개가 다 들어오고 있기 때문에 그 안에서 어떤 state를 사용할 것인지를 명시해주는 것이라고 이해하면 되겠습니다.