Redux middleware

$ npx create-react-app learn-redux-middleware
$ cd learn-redux-middleware
$ yarn add redux react-redux

리덕스 모듈 준비

src/modules/counter.js
src/modules/index.js

프로젝트에 리덕스 적용

src/index.js에 root reducer 불러와서 이를 통해 새로운 스토어를 만들고 Provider를 사용해서 프로젝트에 적용

components/Counter.js
containers/CounterContainer.js
App.js 렌더링
$ yarn start

redux-logger 사용하기

$ yarn add redux-logger
$ yarn add redux-devtools-extension
index.js 수정

import { composeWithDevTools } from 'redux-devtools-extension';

const store=createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(logger))
  };

redux-thunk

리덕스에서 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어.
액션 객체가 아닌 함수를 디스패치할 수 있다.

// 직접 만드는 미들웨어 코드
const thunk = store=>next=>action=>
typeof action === 'function'
? action(store.dispatch, store.getState)
: next(action)

$ yarn add redux-thunk
index.js

import ReduxThunk from 'redux-thunk';

... ReduxThunk,logger));

카운터 딜레이하기

modules/counter.js
containers/CounterContainer.js

redux-thunk로 프로미스 다루기

1. 가짜 API 함수 만들기
   src/api/posts.js

posts 리덕스 모듈 준비하기

프로미스를 다루는 리덕스 모듈을 다룰 때 고려해야 할 사항
1. 프로미스가 시작, 성공, 실패했을 때 다른 액션을 디스패치해야한다.
2. 각 프로미스마가 thunk 함수를 만들어주어야 한다.
3. 리듀서에서 액션에 따라 로딩중, 결과, 에러 상태를 변경해주어야한다.
modules/posts.js

리덕스 모듈 리팩토링하기

src/lib.asyncUtils.js 의 함수를 이용하여 기존 posts 모듈 리팩토링
modules/posts.js
리팩토링이 끝났으면 모듈을 루트 리듀서에 등록

포스트 목록 구현

components/PostList.js
containers/PostListContainer.js

리액트 라우터 적용하기

$ yarn add react-router-dom
index.js

import { BrowserRouter } form 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
  ...
  </BrowserRouter>

포스트 조회하기

components/Post.js
containers/PostContainer.js

라우트 설정하기

pages/PostListPage.js
pages/PostPage.js
App.js 렌더링
PostList 열어서 Link 컴포넌트 사용하기
components/PostList.js

API 재로딩 문제 해결하기

1. 만약 데이터가 이미 존재한다면 요청을 하지 않도록 하는 방법
2. 로딩중... 을 띄우지 않는 것.
   lib/asyncUtils.js handleAsyncAction 함수 수정
   keepData 파라미터를 추가하여 만약 이 값이 true로 주어지면 로딩을 할 때에도 데이터를 유지하도록 수정.
   modules/posts.js posts리듀서 작성
   containers/PostListContainer.js

포스트 조회시 재로딩 문제 해결하기

1. 컴포넌트가 언마운트될 때 포스트 내용을 비우도록 하는 것
   modules/posts.js
   containers/PostContainer.js에서 useEffect의 cleanup 함수에서 해당 액션을 디스패치
   post 모듈에서 관리하는 상태 구조 변경
   → asyncUtils 여러 함수를 커스터마이징 해야 한다.
   기존 함수를 수정하는 대신에 새로운 이름으로 함수 작성
   createPromiseThunkById, handleAsyncActionsById
   lib/asyncUtils.js
   modules/posts.js

redux-saga

액션을 모니터링하고 있다가 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식. redux-thunk 다음으로 많이 사용하는 미들웨어.