yarn add @reduxjs/toolkit
npm install @reduxjs/toolkit
const store = createStore(rootReducer);
더이상 사용 권장 안함
configStore.js
const store = configureStore({
todos,
});
요거만 넣어주면 끝임
slice를 사용하면, 자동으로 export를
reducer : 함수이다. state와 action을 받아서 동작을 하는..
action type이 생성된다.
todos/addTodo
todos/removeTodo
todos/switchTodo
원래 리덕스 안에 있었던 개념들을 살펴보자
1. action items
2. action creators
-> 위 내용 모두 우리가 지금까지 직접 만든 items, creators 들을, 툴킷이 알아서 다 해준다.
const todosSlice = createSlice ({
name:''
initialState: ''
reducers:''
})
todosSlice.actions = action Creator들
import { createSlice } from "@reduxjs/toolkit";
import React from "react";
import { v4 as uuidv4 } from "uuid";
// action items
const ADD_TODO = "ADD_TODO";
const REMOVE_TODO = "REMOVE_TODO";
const SWITCH_TODO = "SWITCH_TODO";
/**
* 메서드 개요 : todo 객체를 입력받아, 기존 todolist에 더함
* 2022.12.16 : 최초작성
*
* @param {todo 객체} payload
* @returns
*/
export const addTodo = (payload) => {
return {
type: ADD_TODO,
payload,
};
};
/**
* 메서드 개요 : todo의 id를 입력받아, 일치하는 todolist를 삭제
* 2022.12.16 : 최초작성
*
* @param {todo의 id} payload
* @returns
*/
export const removeTodo = (payload) => {
return {
type: REMOVE_TODO,
payload,
};
};
/**
* 메서드 개요 : todo의 id를 입력받아, 일치하는 todo 아이템의 isDone을 반대로 변경
* 2022.12.16 : 최초작성
*
* @param {*} payload
* @returns
*/
export const switchTodo = (payload) => {
return {
type: SWITCH_TODO,
payload,
};
};
// initial states
const initialState = [
{
id: uuidv4(),
title: "리액트 공부하기",
contents: "빨리빨리 암기하기",
isDone: false,
},
{
id: uuidv4(),
title: "스프링 공부하기",
contents: "인강 열심히 들어보기!!",
isDone: true,
},
{
id: uuidv4(),
title: "데이트",
contents: "홍대입구역에서 3시까지",
isDone: false,
},
];
// reducers
const todos = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO: // 기존의 배열에 입력받은 객체를 더함
return [...state, action.payload];
case REMOVE_TODO: // 기존의 배열에서 입력받은 id의 객체를 제거(filter)
return state.filter((item) => item.id !== action.payload);
case SWITCH_TODO: // 기존의 배열에서 입력받은 id에 해당하는 것만 isDone을 반대로 변경(아니면 그대로 반환)
return state.map((item) => {
if (item.id === action.payload) {
return { ...item, isDone: !item.isDone };
} else {
return item;
}
});
default:
return state;
}
};
export default todos;
initialState/
const initialState = [
{
id: uuidv4(),
title: "리액트 공부하기",
contents: "빨리빨리 암기하기",
isDone: false,
},
{
id: uuidv4(),
title: "스프링 공부하기",
contents: "인강 열심히 들어보기!!",
isDone: true,
},
{
id: uuidv4(),
title: "데이트",
contents: "홍대입구역에서 3시까지",
isDone: false,
},
];
slice /
export const todosSlice = createSlice({
name: "todos",
initialState,
reducers: {
addTodo: (state, action) => {
console.log(state);
console.log(action);
return [...state, action.payload];
},
removeTodo: (state, action) => {
return state.filter((item) => item.id !== action.payload);
},
switchTodo: (state, action) => {
return state.map((item) => {
if (item.id === action.payload) {
return { ...item, isDone: !item.isDone };
} else {
return item;
}
});
},
},
});
export const { addTodo, removeTodo, switchTodo } = todosSlice.actions;
export default todosSlice.reducer;