Redux Toolkit(create Action)

리덕스 툴킷은 적은량의 코드로 같은 기능을 하도록 도와주는 것이다. 먼저 설치를 해보자.

npm install @reduxjs/toolkit

설치를 하고, 먼저 해볼건 createAction이다.

// const ADD = "ADD";
// const DELETE = "DELETE";

// const addToDo = text => {
//     return {
//         type: ADD,
//         text 
//     };
// }

// const deleteToDo = id => {
//     return { 
//         type: DELETE,
//         id: parseInt(id)
//     };
// }
const addToDo = createAction("ADD");
const deleteToDo = createAction("DELETE");

이런 식으로, 변수를 잡고, type지정을 하는 것에서 createAction함수 하나로 줄일 수 있다. 

그리고,

// const reducer = (state = [], action) => {
//     switch(action.type) {
//         case ADD:
//             return [...state, { text: action.text, id: Date.now()}];
//         case DELETE:
//             return state.filter(toDo => toDo.id !== action.id);
//         default:
//             return state;
//     }
// };
const reducer = (state = [], action) => {
    switch(action.type) {
        case addToDo.type:
            return [...state, { text: action.payload, id: Date.now()}];
        case deleteToDo.type:
            return state.filter(toDo => toDo.id !== action.payload);
        default:
            return state;
    }
};

case에 각각 addToDo.type, deleteToDo.type라고 적어줘야 한다. 콘솔에 찍어보면 각각 ADD, DELETE라는 텍스트가 나온다. 그리고 action에는 payload라는 data가 무조건오게 되고, action.text가 아니라 action.payload라고 적어주면 된다.