[React.js] Redux-Toolkit

Redux-Toolkit

redux-toolkit이란 redux로 작성하는 코드를 더 효율적이고 간단하게 작성할 수 있게 해주는 툴킷이며 다음과 같은 기존 redux의 단점을 보완할 수 있다.

 

• 많은 설정 - 유용한 작업을 수행하기 위해서는 다수의 라이브러리, 미들웨어 설정 필요
• 반복되는 코드
• 불변성 유지의 어려움
  
  

기본적으로 redux-toolkit을 사용하게되면 createSlice를 통해 기능별로 여러개의 slice를 만든 후, configureStore를 통해 하나의 store로 합치는 패턴으로 작업하게 된다.

 

 

 

Redux-Toolkit 설치하기

npm i @reduxjs/toolkit react-redux

 

Redux-Toolkit 사용하기

redux-toolkit을 사용하여 간단한 counter를 만들어보자.

 

1. counterSlice 만들기

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

const counterSlice = createSlice({
  name: "counterSlice",
  initialState: { value: 0 },
  reducers: {
    up: (state, action) => {
      state.value = state.value + action.payload;
    },
    down: (state, action) => {
      state.value = state.value - action.payload;
    },
  },
});

export const { up, down } = counterSlice.actions;
export default counterSlice.reducer;

먼저 creacteSlice()를 통해 counterSlice를 만들어준다. createSlice의 기본 인자로는 name과 initialValue, reducers가 필요하다. reducers에서는 각각의 상태값 업데이트 함수를 정의해주면된다. redux-toolkit의 장점이 여기서 나오는데 바로 불변성을 유지해주는 immer 라이브러리가 기본적으로 탑재되어있어 return {...state, state.value = ....}와 같이 직접 객체 구조 분해 할당을 해줄 필요가 없다는 것이다. 따라서 그냥 상태값을 직접 변경해줘도 된다!

 

그리고 각 상태값 업데이트 함수과 슬라이스의 reducer를 export 해준다.

 

2. configureStore 만들기

import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "./counterSlice";

const store = configureStore({
  reducer: {
    counter: counterSlice,
  },
});

export default store;

configureStore()를 통해 하나의 store를 만들어준다. configureStore의 기본 인자로 reducer가 필요한데, 여기에는 만들어놓은 slice들의 reducer들을 나열하면된다. 위 코드에서 counter는 counterSlice의 reducer의 이름이되며 store.counter로 접근할 수 있다.

 

3. 컴포넌트에서 사용하기

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

먼저 기존 redux와 같이 Provider로 컴포넌트에 store를 연동해주는 작업이 필요하다.

 

const Counter = () => {
  const dispatch = useDispatch();
  const count = useSelector((state) => {
    return state.counter.value;
  });

  const handleCounterDown = () => {
    dispatch(down(1));
  };

  const handleCounterUp = () => {
    dispatch(up(1));
  };

  return (
    <div>
      <button onClick={handleCounterDown}>-</button>
      {count}
      <button onClick={handleCounterUp}>+</button>
    </div>
  );
};

 

useSelect를 통해 store의 특정 상태값에 접근할 수 있으며, useDispatch를 통해 store의 값을 변경시킨다.

counterSlice에서 export한 up과 down 함수에 인자로 특정 값을 넘겨주는데 이는 각 함수에서 action.payload로 사용할 수 있다.

---