1. reducer와 action분리

• 보통 reducer, action 이 보통 길어질 확률이 높기 때문에 파일/폴더로 나눠주는 것이 좋다.
• 경험적 판단이 중요한데, 초보자들의 입장에서는 확장성(후에 더 복잡해질 가능성)을 고려하여, 확장성이 큰 것은 따로 빼는 것이 좋다.
• 순수함수란?
  • 매개변수, 함수 내부에서 선언한 변수를 제외하고는 다른 것들을 참조하지 않는 함수이다.

2. combineReducer로 reducer분리하기

• 함수를 쪼개기 위해 redux가 제공하는 combineReducers를 사용한다.
• ex) userReducer와 combineReducer 2개가 있는 상황을 가정해본다.

  • [useReducer.js]

    const initialState = {
    	...중략...
    }
    
    const userReducer = (prevState= initialState, action) =>{
    	...중략...
    }
    
    export default userReducer 
    

  • [postReducer.js]

    const initialState = {
    	...중략...
    }
    
    const postReducer= (prevState = initialState, action) =>{
    	...중략...
    }
    
    export default postReducer
    

  • [postReducer.js]

    import useReducer from "./useReducer"
    import postReducer from "./postReducer"
    
    combineReducers({
    	user: useReducer,
    	posts: postReduer
    })
    
    export default combineReducers
    

    • user:userReducer 에서 user 가리키는 것은?
      • 원래 reducer를 나누기 전에는 prevState.user와 같이 사용하였다. 그런데 이제 user라고 확정하면서 prevState만 사용해도 자동으로 prevState.user를 가리키게 되었다.

3. 폴더구조 최종

project
├── reducers
│   ├── userReducer.js
│   ├── postReducer.js
│   └── index.js
├── actions
│   ├── login.js
│   └── logout.js
└── index.js