Redux Toolkit

리덕스

// 액션 타입
const INCREMENT = 'INCREMENT';

// 액션 생성 함수
const increment = () => ({ type: INCREMENT });

// 리듀서
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    default:
      return state;
  }
};

// 스토어 생성
import { createStore } from 'redux';
const store = createStore(counterReducer);

리덕스 툴킷

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

// 이후 위처럼 리듀서를 등록

• createSlice : createReducer + createAction
  • 함수이름으로 액션을 자동으로
• 불변성 유지해줌 . push같은거 써도 알아서 처리해줌
  • 다중리스트일때 유용할둣