redux-toolkit

redux-toolkit

리덕스 툴킷은 리덕스를 보다 작은 코드양으로 간편하게 사용할 수 있는 방법이다.

리덕스 툴킷은 리덕스를 사용하다보면 redux devtool, immer, thunk 등 여러가지 라이브러리를 추가적으로 설치해야 하지만, redux-toolkit 내부에 이미 설치가 되어 있기에 굳이 설치 할 필요가 없다.

redux-toolkit 설치

npm install @reduxjs/toolkit

리덕스 툴킷 구조

app.js

Provider로 store를 저장해준다. 저장소 내부에는 여러개의 slice로 이루어져 있다.

<script>
import { Provider } from "react-redux";
import Counter from "./components/Counter";
import store from "./store";

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

export default App;
</script>

store/index.js

configureStore를 통해 store를 생성해준다.

configureStore 역할을 여러개의 slice를 모아주는 역할이다.

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

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

export default store;
</script>

store/counterSlice.js

createSlice로 Slice를 만든다. createSlice는 객체를 인자로 받고 객체에는 필수 값 name, initialState, reducers가 들어간다.

name: 이름 / initialState: 초기 상태 / reducers: 메소드(함수)로 이루어져 있다.

<script>
import { createSlice } from "@reduxjs/toolkit";

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

export default counterSlice;
export const { up, down, init } = counterSlice.actions;
</script>

components/Counter.js

는 store의 state를 인자를 받아온다. 현재는 예제로 만들어둔 counterSlice를 가지고 온다. slice가 여러개 있다면 여러개의 slice를 가지고 온다.

counter가 가지고 있는 value값에 접근하여 이를 화면에 출력한다.

disptch는 counterSlice에 만들어둔 함수로 값을 던져주기 위해 사용한다.

<script>
import { useSelector, useDispatch } from "react-redux";
import { down, init, up } from "../store/counterSlice";

function Counter() {
  const dispach = useDispatch();
  const count = useSelector((state) => {
    return state.counter.value;
  });
  const addNumber = () => {
    dispach(up(2));
  };
  const minusNumber = () => {
    dispach(down(2));
  };
  const initNumber = () => {
    dispach(init(""));
  };

  return (
    <div>
      <div>{count}</div>
      <button onClick={addNumber}>+</button>
      <button onClick={minusNumber}>-</button>
      <button onClick={initNumber}>초기화</button>
    </div>
  );
}

export default Counter;
</script>