メモ redux toolkit

newtaro

クリックイベント時にactionCreaterをよびだしたいときはいかのようなかんじでかける。

onClick={() => dispatch(doneTask(task))}

doneTaskはSlice内に作ったActioncreaterで

個別でexportしておく

const tasksModule = createSlice({
   name: 'tasks',
   initialState,
   reducers: {
       addTask (state: State, action: PayloadAction<string>) {
           state.count++
           const newTask: Task = {
               id: state.count,
               title: action.payload,
               done: false
           }
    
           state.tasks = [newTask, ...state.tasks]
       },
       doneTask (state: State, action: PayloadAction<Task>) {
           const task = state.tasks.find(t => t.id === action.payload.id)
           if (task) {
               task.done = !task.done
           }
       },
       deleteTask (state: State, action: PayloadAction<Task>) {
           state.tasks = state.tasks.filter(t =>
               t.id !== action.payload.id
           )
       }
   }
})
export const {
   addTask, doneTask, deleteTask
} = tasksModule.actions

クリック時にリンク遷移させたいとかであればここでrouterとか使う？？



この記事が気に入ったらサポートをしてみませんか？