react的状态管理redux-toolkit

下载

yarn add @reduxjs/toolkit react-redux

创建两个js文件一个是store和一个toolkit 碎片

todoSlice

import {
          
    createSlice } from @reduxjs/toolkit
//必须有一哥初始值
const initialState = {
          
   
  todo: [
    {
          
    id: 0, name: "吃饭", done: true },
    {
          
    id: 1, name: "睡觉", done: false },
    {
          
    id: 2, name: "打豆豆", done: false }
  ]
}
export const todoSlice = createSlice({
          
   
  name: todoSlice,
  initialState,
  reducers: {
          
   
    increment: (state = initialState, action) => {
          
   
      // Redux Toolkit允许我们在reducers中直接写改变state的逻辑.
      // 由于使用了Immer库,所以并没有真的改变state
      state.todo.push(action.payload)

    },
    decrement: (state, action) => {
          
   
      state.todo.splice(action.payload, 1)
    },
    changedone: (state, action) => {
          
   
      state.todo[action.payload.index].done = action.payload.done
    },
    cleardone: (state, action) => {
          
   
      state.todo=state.todo.filter(item=>{
          
   
        return item.done!==true
      })
    }
  },
})

// reducer方法的每一个case都会生成一个Action
export const {
          
    increment, decrement, changedone, cleardone } = todoSlice.actions
export default todoSlice.reducer

store

import {
          
    configureStore } from @reduxjs/toolkit
import todoSlice from "./todoSlice.js"
export const store = configureStore({
          
   
  reducer: {
          
   
    todos: todoSlice,
  }
})

在index.js对store进行处理