Redux middleware

BirdsOnTree·2022년 7월 27일
0

React

목록 보기
1/10
post-thumbnail

리덕스를 작성하며 미들웨어의 필요성을 느끼지 못했다.
당연히 비동기 처리는 미들웨어에 해야한다고 생각만 했지 실제로 리듀서 등에서 비동기 처리를 해보지 않아서 실제 어떤 애러나 문제가 생기는지 확인을 못한것이 후회가 남는다.

Redux Middleware에 대해서

yarn add redux-thunk

firestore 데이터를 리덕스 스토어에 넣기 위해 middleware를 설치하였다.

데이터를 가져오기 위해 비동기 통신을 해야하는데 이때 필요한 것이 미들웨어이다.

리덕스는 기본적으로는 액션 객체를 디스패치 한다. > 함수를 생성하면 특정 액션이 발생하기 전에 조건을 주거나, 어떤 행동을 사전에 처리할수 있다.

미들웨어는 결국 하나의 함수입니다. 함수를 연달아서 두번 리턴하는 함수인 것이다.

function middleware(store) {
  return function (next) {
    return function (action) {
      // 하고 싶은 것들
    };
  };
};

middleware가 필요한 이유가 무엇인가

비동기적인 작업 실행을 위해, 순수한 함수 똑같은 결과값을 반환해야하는데 그렇지 않을때가 있어서.

Redux를 사용하면서 비동기작업을 다룰때에는 미들웨어가 있어야지 더욱 손쉽게 상태를 관리할 수 있다.
액션이 dispatch되어서 reducer에서 이를 처리하기 전에 사전에 지정한 작업들을 설정하게 된다.
다시말해 Action과 Reducer의 중간에 위치하고 있다.
액션이 일어나고 → 미들웨어가 할 일을 하고 → 리듀서에서 처리

0개의 댓글