Action Creator는 UI의 어떤 Action을 정해서 Dispatch를 통해 Reducer로 정보전달을한다.
해당된 정보에 저장이된다.
react프로젝트에 적용하는 방법
npm i redux react-redux
Create
→ reducers (accountReducer.js , usersReducer.js)를 묶어주는 index.js파일 생성
→ reducer 폴더의 상위폴더에 store.js를 생성하고, createStore를 불러온다. 첫번째 인자는 reducer를 종합한 reducers의 index.js파일 그리고 두번째 인자에는 첫번째 state를 준다. 여기서는 빈객체이다.
→ react-redux의 Provider를 index.js 파일의 App 컴포넌트의 상위에 감싸준다.
→ 미리 설정해둔 store를 불러와서 Provider컴포넌트에 props로 넘겨준다.
→ App.js에 react-redux의 useSelector를 불러오고. state를 정의한다. useSelector 콜백함수로 state를 받아온다. console.log로 s tate를 확인해보면,
Update
→ 업데이트 처리를 해주기 위해 useDispatch ActionCreator의 콜백함수로 넘겨준다.
→ App에서 실행을 하고 상태값을 바꿔보면 이러한 오류가뜬다.
→ redux-thunk 미들웨어는 비동기처리를 해주는 작업을 도와준다. createStore의 3번째 인자에 미들웨어를 적용시킨 함수를 담아준다.