RTK
리덕스를 개량한 것
ducks 패턴이 오히려 전체적인 코드의 양을 늘리는 것을 개선하기 위해 만든 모듈
설치
yarn add @reduxjs/toolkit
Redux -> RTK
Redux
// action value
const ADD_TODO = "ADD_TODO";
// action creator
export const addTodo = (payload) => {
return { type: ADD_TODO, payload };
};
RTK
redux 사용을 위해 만들었던 modules라는 폴더는 컨벤션상 잘 쓰이지 않음
대신 redux > slices > todoSlice.js 의 형태로 쓰인다
1) initialState 선언
2) createSlice()
- 객체를 매개변수로 받음
- 객체에는 name, initialState, reducers가 들어옴
import { createSlice } from "@reduxjs/toolkit";
const initialState = [
{ id: 1, title: "react 배우기", isDone: false },
{ id: 2, title: "redux 실습", isDone: false },
];
const todoSlice = createSlice({
name: "todo",
initialState: initialState,
reducers: {
addTodo: (state, action) => {
return [...state, action.payload];
},
deleteTodo: (state, action) => {
return state.filter((todo) => todo.id !== action.payload);
},
completeTodo: (state, action) => {
return state.map((todo) => {
return todo.id === action.payload.id ? { ...todo, isDone: true } : todo;
});
},
},
});
export const { addTodo, deleteTodo, completeTodo } = todoSlice.actions;
export default todoSlice.reducer;
3) configStore.js 수정
import { configureStore } from "@reduxjs/toolkit";
import todoSlice from "../slices/todoSlice";
const store = configureStore({
reducer: {
todo: todoSlice,
},
});
export default store;
4) 사용하는 컴포넌트에서 리듀서 사용할 수 있게 수정
- reducer들을 import해서 dispatch에 사용하는 것은 동일함
'React' 카테고리의 다른 글
[React] react-router-dom Outlet 이동하지 않을 때 (0) | 2024.08.27 |
---|---|
[React] 컴포넌트에 styled-components 로 스타일 적용하기 (0) | 2024.08.23 |
[React] redux, payload, ducks 패턴 (0) | 2024.08.20 |
[React + Supabase] 설치, 셋팅, 간단한 사용법 (0) | 2024.08.20 |
[React] react-router-dom (0) | 2024.08.20 |