Redux (3)
Redux (3)
🚀 redux-toolkit를 이용하여 코드를 작성하는 가장 좋고 현대적인 방법
- Redux-toolkit은 redux 코드를 단순화하기 위한 매우 유명하고 강력한 라이브러리이며 Redux에서 공식적으로 권장합니다.
- Redux-toolkit에는 store, createAction, createReducer 및 createSlice를 구성하는 많은 메서드가 있습니다.
- configureStore 메소드는 redux 스토어를 생성하는 데 사용되며 redux-devTools를 자동으로 구성합니다. 따라서 devtoolsEnhancer 기능을 사용할 필요가 없습니다.
- 그런 다음 payload 속성을 사용하여 작업 개체를 만드는 데 사용되는 createAction 메서드를 봅니다.
import { createAction } from '@reduxjs/toolkit';
const addTask = createAction('ADD_TASK');
console.log(addTask({ task: 'Add new task!' }));
//Output in console
{ type: 'ADD_TASK', payload: { task: 'Add new task!' } }
- 그런 다음 switch case 또는 If..else를 작성하지 않고 리듀서 함수를 생성하는 데 사용되는 createReducer 함수.
- 그리고 마지막에는 하나의 함수에서 액션과 리듀서를 생성하는 데 사용되는 createSlice 함수가 있습니다. 이는 코드를 깨끗하고 유지 관리하기 쉽게 만드는 데 매우 유용함.
import { createSlice } from "@reduxjs/toolkit";
let id = 0;
const taskSlice = createSlice({
name: "tasks",
initialState: [],
reducers: {
// action: function
addTask: (state, action) => {
state.push({
id: ++id,
task: action.payload.task,
completed: false,
});
},
removeTask: (state, action) => {
const index = state.findIndex((task) => task.id === action.payload.id);
state.splice(index, 1);
},
completedTask: (state, action) => {
const index = state.findIndex((task) => task.id === action.payload.id);
state[index].completed = true;
},
},
});
export const { addTask, removeTask, completedTask } = taskSlice.actions;
export default taskSlice.reducer;
- redux-toolkit을 사용한다면 객체처럼 리듀서를 결합할 수 있음.
import { configureStore } from "@reduxjs/toolkit";
import employeeReducer from "./employees";
import taskReducer from "./tasks";
const store = configureStore({
reducer: {
tasks: taskReducer,
employees: employeeReducer,
},
});
export default store;