Redux의 코드를 간결하게 해주는 @reduxjs/toolkit

redux를 사용하면 코드가 복잡해지는 단점이 있다.

@reduxjs/toolkit를 쓰면 이를 해결 할 수 있다.

 

Basic

@reduxjs/toolkit을 쓰는 간단한 예제다.

github.com/socratone/simple-redux-toolkit

 

configure.js는 redux의 store에 해당한다.

configureStore 메소드를 써서 store를 생성하면

redux dev tools 설정을 자동으로 해주고

dispatch를 비동기적으로 처리할 수 있다.

 

bugs.js는 redux의 reducer에 해당한다.

createSlice 메소드를 써서 보다 간결하게 reducer를 구현할 수 있다.

각 action을 처리하는 함수에서 원래는 state를 deep copy 해야 하지만

내부적으로 immer가 적용됐기 때문에 예제처럼 state 인자를 받고 바로 처리할 수 있다.

 

npm start로 브라우저에서 로딩한 뒤 console 창을 보면

index.js의 dispatch 메소드를 어떤식으로 사용해야 하는지 확인할 수 있다.

 

Combine

@reduxjs/toolkit에서 state를 묶는 예제다.

github.com/socratone/simple-redux-toolkit-combine

 

reducer.js는 root가 되는 reducer이고

reducer.js 자식의 entities.js에서 combineReducers를 써서 bugs와 items의 state를 묶었다.

그 결과 state 객체는 아래와 같이 된다.

 

 

Middleware

dispatch가 실행될 때마다 state에 action이 발생하기 전에 호출되는 함수를 말한다.

github.com/socratone/simple-redux-toolkit-middleware

 

configureStore.js에서 middleware로 넣을 함수를 설정해야 하고

logger.js처럼 사용할 수 있다.

next(action)을 이용해서 다음 middleware 함수로 넘어가게 하거나

다음에 오는 함수가 없다면 action에 따른 state를 변경하게 된다.

const logger = store => next => action => {
  console.log('store:', store);
  console.log('next:', next);
  console.log('action:', action);
  next(action);
};

 

참고 : redux-toolkit.js.org