React : combineReducer :reducer 여러개를 합쳐보기

🎈 주의 : 이문법은 새로운 문법이 아닌 리덕스의 이해를 돕기위한 글입니다. 

 

 

 

 

예시로 reducer의 파일이 여러개라고 가정하자.

 

reducers 폴더 안에는

로그인을 담당자는 authenticateReducer과 제품을 데이터를 갖고 있는 productReducer이 있다.

이 값들을 store로 보내줘야 하는데 이걸 합치는 과정을 

combineReducer 을 통해 여러개를 합칠 수 있다.

 

 

reducers 폴더안에 index.js 를 만든다.

import { combineReducers } from "redux";
import authenticateReducer from "./authenticateReducer";
import productReducer from "./productReducer";
export default combineReducers({
  auth : authenticateReducer,
  product : productReducer,
})

 

1. redux에서 combineReducers를 import 해준다.

2. authenticateReducer 파일을 import 해준다.

3. productReducer 파일을 import 해준다.

4. export default combineReducers 는 객체를 이용해서 합친다 (공식문서)

auth라는 키값에 : authenticateReducer 값을 넘겨주고

product 란느 키값에: productReducer 을 값을 넘겨주면 된다.

 

 " 키 이름을 단순화 하기위해 키값을 넣어준다. "

 

5. 이제 combineReducers을 store에 적용 시키면 된다.

import {createStore,applyMiddleware } from "redux";
import thunk from "redux-thunk"
import rootReducer from "./reducers"

let  store = createStore(rootReducer,applyMiddleware(thunk))

export default store;

 

a.  import를 해주고 내가 원하는 이름값을 줄 수 있다 .( rootReducer ) 

b. 가져오는건 "./reducers " 로 가져올수 있는데 나는 index.js 값을 가져오고 싶은데..?

c. index.js는 기본값이기 때문에 뒤에 / index를 안써도 자동으로 index값이 가져오게 된다.