redux이론3. combineReducers(reducers)

목차

1. combineReducers란?
2. 작성예시
3. state의 key 제어 방법
4. combineReducers()의 인자값
5. 리듀싱 함수들에 대한 규칙

 

---

 

 

앱이 점점 복잡해지면 코드가 길어지고,

길고 복잡한 코드는 가독성을 떨어트린다.

 

또한 모든 업데이트 로직을 하나의 reducer에 작성하는 경우 유지보수가 용이하지 않다.

 

 

그래서 이번 게시글에서는 reducer를 한번 분리해보자!

 

 

1. combineReducer란?

 

• 각기 다른 reducer를 값으로 가진 객체를 받아서 createStore의 매개변수로 전달할 하나의 reducer로 변환해줌
• 생성된 reducer는 내부의 모든 reducer를 호출하고 결과를 모아서 하나의 state 객체로 변환해줌
• state 객체의 형태는 reducers로 전달된 키들을 따름

 

 

 

2. 작성예시

reducers/user.js

const initialState = {
    userid: 'ivy',
}

//코멘트를 리듀서 명으로
const ADD = 'USER/ADD'
const USER_ADD = (payload) => ({type:ADD,payload})

const user = (state = initialState, action) => {
    switch (action.type) {
        case ADD:
            return {
                ...state,
                userid: action.payload
            }
        default:
            return state
    }
}

module.exports = {
    user,
    USER_ADD
}

 

reducer/comment.js

const initialState = {
    list: [{idx:0, content:'asdf',date:'2022-05-03'}],
}

//코멘트를 리듀서 명으로
const ADD = 'COMMENT/ADD'
const comment_add = (payload) => ({type:ADD, payload})

comment = (state=initialState, action) => {
    const {payload,type} = action
    switch (type) {
        case ADD:
            return {
                ...state,
                list: [...state.list, payload]
            }
        default:
            return state
    }
}

module.exports = {
    comment,
    comment_add
}

 

reducer/index.js

const redux = require('redux');
const { combineReducers } = redux;
const { user, USER_ADD } = require('./reducers/user');
const { comment, comment_add } = require('./reducers/comment');

const reducer = combineReducers({
    user,
    comment,
});

module.exports = {
	reducer
    }

 

app.js

const {createStore} = require('redux');
const reducer = require('./reducers/index');
const store = createStore(reducer);

 

 

3. state의 key 이름 제어방법

(1) 전달되는 객체의 key를 식별가능하게 작성

(2) 관리하는 state의 이름에 따라 reducer 명명

 

 

 

4. 인자값: reducers

• 하나로 합쳐질 각각의 reducers(리듀싱 함수들)를 값으로 가지는 객체

 

5. combineReducers로 전달되는 모든 reducers(리듀싱 함수들)에 대한 규칙

• 식별되지 않은 모든 state에 대해서 초기 인자로 주어진 state를 그대로 반환
• undefined를 반환해서는 안됨
• state가 undefined로 주어질 시 반드시 해당 함수의 초기 state를 반환해야 함