Redux toolkit (create Slice)

createSlice를 사용하면, 코드를 더 줄일 수 있다.

const addToDo = createAction("ADD");
const deleteToDo = createAction("DELETE");

//createReducer
const reducer = createReducer([], {
    [addToDo]: (state, action) => {
        state.push({ text: action.payload, id: Date.now()})
    },
    [deleteToDo]: (state, action) => 
        state.filter(toDo => toDo.id !== action.payload)
})

위의 코드를

const toDos = createSlice({
    name: 'toDosReducer',
    initialState: [],
    reducers: {
        add: (state, action) => {
            state.push({ text: action.payload, id: Date.now()})
        },
        remove: (state, action) => 
            state.filter(toDo => toDo.id !== action.payload)
    }
})

이렇게 작성해서 name은 toDosReducer이고, initial state는 비워져있고, reducers는 add와 remove가 된다.

// export const actionCreators = {
//     addToDo,
//     deleteToDo
// }
export const { add, remove } = toDos.actions;

그리고, createSlice는 actions까지 제공을 해주므로 이렇게 적어주면 된다.