Redux Toolkit VS Vanila Redux

With·2021년 9월 14일

Redux

목록 보기

1/2

module/index.js (configureStore.js)

전

import { combineReducers, createStore } from "redux";
import counter from "./counter";

const rootReducer = combineReducers({ counter });
const store = createStore(rootReducer);

export default store;

후

import { configureStore } from "@reduxjs/toolkit";
import logger from "redux-logger";
import thunk from "redux-thunk";

// Slice
import counterSlice from "./counter";
import todosSlice from "./todos";

const store = configureStore({
  // reducer가 여러개인 경우 이렇게 넣으면 됩니다.
  reducer: {
    counter: counterSlice.reducer,
    todos: todosSlice.reducer,
  },
  middleware: [thunk, logger],
});

export default store;

// const currentStores = useSelector((state) => state);
// console.log ---> {counter: {…}, todos: {…}}

combineReducers 필요 없음!

module/counter.js

전

// action type
const INCREMENT = "counter/INCREMENT";

// action creator
export const increase = () => ({ type: INCREMENT });

// initial State
const initialState = { count: 0 };

// reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return state;
    default:
      return state;
  }
};

export default counter;

후

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter", // action type의 앞에 들어간다 ex : counter/increment
  initialState: { count: 0 },
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
  },
});

export const { increment } = counterSlice.actions;
export default counterSlice;

action type, action creator, initial state, reducer 별도 작성 ❌ -> 한번에!

index.js

import { Provider } from "react-redux";
import store from "./module";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);