react-toolkit

react-toolkit

创建reducer

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
//createAsyncThunk创建异步action creator方法，可以执行dispatch方法
//通过dispatch实现异步方法
export const syncSlice=createAsyncThunk(
    'todos/type',//action对象的type属性值前缀
    (payload,thunkAPI)=>{//执行异步的函数
    setTimeout(() => {
    console.log(s,1234564);
        thunkAPI.dispatch()
    }, 2000);
})

//返回promise通过extraReducer处理
export const loadTodos=createAsyncThunk(
    'todos/type',//action对象的type属性值前缀
    (payload)=>axios.get(palload).then((res)=>res)
)


//actions保存action creator方法
 const {reducer: mySlicereducer,actions} = createSlice({
    name: 'name',//会作为action的type前缀
    initialState: { value: 10 },//初始值
    reducers: {
        //action creator方法
        addState:{
        reducer(state,action) => {//action有type和payload，就是dispatch传入的值
            console.log(state.value++, 'states');
        },
     	prepare(payload){//载荷预加载
            return {
                payload:{title:payload.title,id:nanoid()}
            }
        }
 		}
    },
      //用于接收异步操作的reducer                                           
    extraReducers:{
          //等待
          [loadTodos.pending](){},   
     		//成功
     		[loadTodos.fulfilled](state,action){},
                //失败
                [loadTodos.rejected](state,action){},
    }                                                   
})
export const { addState,syncSlices } = actions
export default mySlicereducer;

创建store

import {configureStore} from '@reduxjs/toolkit'
import logger from 'redux-logger'
//引入reduce文件
import mySliceReducer from 'reducer路径'

//暴露store文件
export default configureStore({
    DevTools：true,//开启浏览器redux调试工具
    reducer: {first：mySliceReducer},//可以配置多个reducer
    middleware:(getDefaultMiddeware)=>{//配置中间件
        //getDefaultMiddeware用于获取内置中间件
        return getDefaultMiddeware().concat(logger)
    }
})

绑定store到根节点

import { Provider } from 'react-redux'

import store from './redx/store路径';

<Provider store={store}><App /></Provider>

页面中使用

const store = useSelector((state) => state.mySilceReducer)

用了状态选择器可以写为
import ｛seletTodos｝ from '转态选择器的路径'
const state = useSelector(selectTodos)

实体适配器

实体作为状态stata保存在实体适配器中，实体适配器返回的状态保存在store对象

store中保存的是实体适配器返回的对象

{
    ids:[],//实体的ID的集合
    entities:{//存储实体集合
        1:{id:1}//将实体的ID作为了属性，键名；实体本身作为值
    }
}

创建与使用实体适配器

import {createEntityAdapter} from '@reduxjs/toolkit'
//createEntityAdapter用于创建实体适配器对象
const todoAdapter = createEntityAdapter()
//创建储存数据的实体适配器

const {reducer: mySlicereducer,actions} = createSlice({
    initialState: todoAdapter.getInitiallState(),//获取实体适配器初始值
    reducers: {
        addState:{
        reducer(state,action) => {
            //向实体适配器添加一条状态
            todoAdapter.addOne(state,action)
         }
    //可以简写为 reducer：todoAdapter.addOne
 		}
    },                                         
    extraReducers:{
        [loadTodos.pending](){},   
     	[loadTodos.fulfilled](state,action){
                //向实体适配器中添加多条状态
                todoAdapter.addMany(state,action)
            },
         [loadTodos.rejected](state,action){},
    }                                                   
})

//组件中获取（在原有基础上加上了entities）
const todos = useSelector((state) => state.reducerName.entities)
//拿到的是对象结构数据，就是实体适配器中的entities

状态选择器

import {createSelector} from '@reduxjs/toolkit'

const {seletAll} =todoAdapter.getSelectors()//获取处理实体适配器数据的状态选择器

export const selectTodos = createSelector((state) => {
    //state是状态对象
    return state.reducerName,//这里拿到了实体适配器格式的数据
},selectAll)

//组件中使用
const todos = useSelector(selectTodos)//这里拿到的就是数组格式的数据了