[React] react-redux 적용

1. 리덕스 설치하기

• 4가지 dependency 모두 다운로드 받기
  • redux-promise, redux-thunk는 미들웨어
  • redux store의 state을 변경하고 싶으면, dispatch 호출과 액션을 통해 변경해야하는데 action은 객체 형식이어야함. 스토어에서 항상 객체 형식으로 받는게 아니라 promise나 function 형식으로 올때가 있음. 이런 형식으로 오면 리덕스 스토어는 action을 받을 수 없음
  • redux-thunk: 함수를 액션으로 dispatch 할 수 있도록 해줌. 이 함수는 dispatch 함수와 현재의 상태를 매개변수로 받아서 원하는 작업을 수행한 후 액션을 dispatch할 수 있음
  • redux-promise: 리덕스 스토어에게 promise를 받는 방법을 알려주는 미들웨어임. 액션의 페이로드로 promise 객체가 들어오면, 해당 promise가 해결될 때까지 대기하고 액션을 dispatch. 이를 통해 비동기 작업을 쉽게 관리할 수 있음

npm install redux react-redux redux-promise redux-thunk --save

2. 리덕스 연결

🌻 Redux 스토어 생성

• createStore 함수에 미들웨어 적용하기
• applyMiddleware 함수는 Redux 미들웨어를 적용하는 함수

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);//미들웨어와 함께 스토어를 만들 수 있게 해줌

🌻 Redux 스토어를 어플리케이션에 연결하고 렌더링

• Provider 컴포넌트를 사용하여 Redux 스토어를 React 어플리케이션에 연결
• createStoreWithMiddleware를 사용하여 스토어를 생성하고 Redux DevTools 확장을 활성화
  • 이때, Reducer를 반드시 인자값으로 넣어주어야 함

root.render(
  <Provider
    store={createStoreWithMiddleware(Reducer,
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__()
    )}
  > 
    <App />
  </Provider>
);

🌻 Reducer 설정

• 도메인별로 slice Reducer를 만들고 combineReducer 메서드로 slice Reducer들을 root Reducer로 만들어서 관리
• 나의 경우, user, todo 리듀서를 따로 만들고 root Reducer로 관리해줌

경로: todolist\src_redux\index.js

import {combineReducers} from "redux"
import User from './user'
import Todo from './todo'
const rootReducer = combineReducers({
    User, Todo
})
export default rootReducer