[Redux Tool Kit] - CreateSlice()

Redux Tool Kit - CreateSlice

---

• 복잡한 리덕스 저장소 구성을 단순화

• initialState, actions, reducer 를 나누지 않고 한번에 선언

library :

yarn add @reduxjs/toolkit

store/todo.ts

// createSlice
// - actioncreator/ reducer 모음집
const todosSlice = createSlice({
  name: "todos",
  initialState: {
    todos: [],
  },
  reducers: {
    setTodo: (state, action: PayloadAction<TodoType[]>) => {
      // ...state : 나머지 state 의 기존 데이터는 유지
      // ...action.payload : 액션의 payload 데이터를 받는다
      return {
        ...state,
        todos: [...action.payload],
      };
      // 아래 주석과 같은 형태로도 처리 후 반환 가능
      // state.todos = action.payload
    },
  },
});

// export const todoActions = { setTodo };
// 하나씩 export 하거나
// export const { setTodo } = todosSlice.actions;
// todosSliceActions 객체로 통째로 export
export const todosSliceActions = { ...todosSlice.actions };
export default todosSlice;

name

• slice의 이름 combineReducers에 이름으로도 사용 가능

initialState

• 기존 initialState: CustomReduxStateInterface의 값

• type 설정을 따로 안해도 괜찮음

reducers : { ...actions }

• reducer의 액션모음집 위치

💡 multiple export methods

• const todosSliceActions = { ...todosSlice.actions }

• const { action1, action2 } = todosSlice.actions

💡 combineReducers 에서 리듀서 접근 방식

import todosSlice from "./todo";

const rootReducer = combineReducers({
  todo: todosSlice.reducer,
});