[리액트(React)] Redux Toolkit

// Redux Toolkit

- Redux를 더 편리하고 쉽게 사용할 수 있게 도와주는 package

- redux toolkit에 redux가 포함되어 있기 때문에 redux를 별도로 설치할 필요가 없고, react-redux만 설치해주면 된다.

npm install @reduxjs/toolkit
npm install react-redux

---

// createSlice

- 자동으로 원래 있던 state를 복사하여 새로운 state 객체를 생성한다.

---

1. global slice 생성

const slice변수명 = createSlice({
  name: ,
  initialState: ,
  reducers: {
    dispatch함수명1(state, action) {},
    dispatch함수명2(state) {},
  },
});

- argument로 객체를 전달한다.

- reducer 객체 안에 메서드를 추가한다.

---

2. store에 생성한 slice 등록

const 저장소명 = configureStore({
  reducer: { key명 : slice변수명.reducer }, // volume 클 경우
  reducer: slice변수명.reducer             // volume 작을 경우
});

- configureStore 함수가 여러 개의 reducer 함수를 하나로 합쳐준다.(store는 오직 하나만 존재하기 때문에)

- volume이 크지 않을 경우 reducer: slice변수명.reducer 로 등록해도 되지만, slice가 많아질 경우에는 key를 설정해준다.

---

3. action 객체 생성

export const action객체 = slice변수명.actions;

- redux toolkit에 의해 자동으로 메서드가 생기고, 그 메서드가 호출되면 action 객체가 생성된다.

---

4. 원하는 컴포넌트에서 action 사용하기

const 함수명 = () => {
  dispatch(action객체명.dispatch함수명());
};

// payload가 있는 경우
const 함수명 = () => {
  dispatch(action객체명.dispatch함수명(payload));
};

- Redux toolkit은 자동으로 payload라는 이름으로 전달되는 것들을 저장한다.

---

import classes from './Counter.module.css';
import { useDispatch, useSelector } from 'react-redux';
import { counterActions } from '../store';

const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);
  const showCounter = useSelector((state) => state.showCounter);

  const incrementHandler = (amount) => {
    dispatch(counterActions.increment(amount));
  };

  const decrementHandler = () => {
    dispatch(counterActions.decrement());
  };

  const toggleCounterHandler = () => {
    dispatch(counterActions.toggle());
  };

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      {showCounter && <div className={classes.value}>{counter}</div>}
      <div>
        <button onClick={() => incrementHandler(1)}>Increment</button>
        <button onClick={() => incrementHandler(5)}>Increment 5</button>
        <button onClick={decrementHandler}>Decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

 

import { configureStore, createSlice } from '@reduxjs/toolkit';

const initialState = { counter: 0, showCounter: true };

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state, action) {
      state.counter = state.counter + action.payload;
    },
    decrement(state) {
      state.counter--;
    },
    toggle(state) {
      state.showCounter = !state.showCounter;
    },
  },
});

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

export const counterActions = counterSlice.actions;

export default store;