Redux最佳实践「Redux Toolkit」

 首先你要有基本的Redux ,React-Reudx,中间件 的基础

如果没有基础,可以看下面两篇文章 

redux详解     在项目中使用redux,react-redux

一,Redux Tooikit解决的问题 

1.redux和react-redux存在问题

  • 配置Redux Store并不简单。
  • 我们需要几个软件包来使Redux与React一起工作。
  • Redux需要太多样板代码。

2. 解决问题

Redux Toolkit(之前称为Redux Starter Kit)提供了一些选项来配置全局store,并通过尽可能地抽象Redux API来更精简地创建动作和reducers。

二,Redux Tooikit包含了?

如果你写过Redux的传统写法,就知道异步请求中间件,Redux DevTools都需要手动配置,但是Redux Tooikit很好地解决了这一点

Redux Toolkit附带了一些有用的软件包,例如ImmerRedux-ThunkReselect。它使React开发人员的工作变得更加轻松,允许他们直接更改状态(不处理不可变性),并应用Thunk之类的中间件(处理异步操作)。它还使用了Redux的一个简单的“选择器”库Reselect来简化reducer函数。

三,具体写法

1.configureStore

configureStore (): 包装 createStore 以提供简化的配置选项和良好的默认设置。它可以自动组合你的slice reducers,添加你提供的任何 Redux 中间件,默认包括 Redux-thunk,并启用 Redux DevTools 扩展。

在store.js中

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from './slice'

 const store=configureStore({
  reducer:{
    /**
     * 们需要从上面的创建的空的 store 导入 reducer 函数并将其添加到我们的存储中,
     * 通过在 reducer 参数中定义一个字段,告诉 store 使用这个 slice reducer 函数来处理该状态的所有更新。
     */
       counter:counterReducer
  }
   // middleware: [],
  // 启用Redux DevTools,默认true
  // devTools: true,
})
export default store

2.creactSlice

它是一个生成存储片的助手函数。它接受片的名称、初始状态和reducer函数来返回reducer、action类型和action creators。

createSlice接收的:一个字符串名来标识该片也就是name
   * 一个初始状态值initialState
   * 以及多个reducer函数。
   * 并且为每个 reducer 函数生成动作创建器

 Redux Toolkit 允许我们在还原器中编写“可变的(mutable)”逻辑。
       * 它实际上并没有改变状态,因为它使用 Immer 库,
       * 它将检测对"draft state" 的更改,并根据这些更改生成
       * 一个全新的不可变状态

在slice.js中

这里写了一个加法,减法,和传参加法的函数

import { createSlice } from "@reduxjs/toolkit";

const initialState={
  value:0,
}
export const counterSlice=createSlice({
  /**
   * createSlice接收的:一个字符串名来标识该片也就是name,
   * 一个初始状态值initialState,
   * 以及多个reducer函数。
   * 并且为每个 reducer 函数生成动作创建器。
   *  */ 
   name:'counter',
   initialState, //相当于state
   reducers:{ //注意这里加了S,后面导出没加S
    increment:(state)=>{
     /** 
       * Redux Toolkit 允许我们在还原器中编写“可变的(mutable)”逻辑。
       * 它实际上并没有改变状态,因为它使用 Immer 库,
       * 它将检测对"draft state" 的更改,并根据这些更改生成
       * 一个全新的不可变状态
       */
       state.value+=1
    },
    decrement:(state)=>{
        state.value-=1
    },
     incrementByAmount: (state, action) => {
      state.value += action.payload
    },
   },
  
})
// 为每个 reducer 函数生成动作创建器(Action creators)
// 相当action
export const {increment,decrement,incrementByAmount}=counterSlice.actions
export default counterSlice.reducer

3.UI渲染

这里的用法与之前的用法一样

  • useSelector,useDispatch进行渲染数据和调用函数
  • 把slice.js中的函数进行导入 

在App.js中

import React from 'react'
import { useSelector,useDispatch } from 'react-redux/es/exports'
import {increment,decrement,incrementByAmount} from './store/slice.js'
export default function App() {
  const count=useSelector((state)=>state.counter.value)
  const dispatch=useDispatch()
  return (
   

当前的count值:{count}

) }

 Redux最佳实践「Redux Toolkit」_第1张图片

四,异步写法createAsyncThunk

在RTK中默认启用了redux-thunk作为异步逻辑中间件,Thunk在Redux中指返回值为函数的action 生成器。

异步请求不是写在Reducers{}对象中,而是写在extraReducers中

  • builder.addCase:是一个内置函数

  • extraReducers内部,您可以处理准备(pedding)已解决(fulfilled)和已拒绝(rejected)状态。

  • 传入的两个参数分别是state:上面初始化状态的对象,和action

  • 注意:在axios请求时,第一个是命名空间和Slice里一样,千万不要重复啊,要不然都不知道使用的哪个!
    第二个参数是一个异步函数,我这里用的是axios。

直接上代码,这里以上面的加减法为基础,增加异步请求数据

import { createSlice } from "@reduxjs/toolkit";
import { createAsyncThunk } from "@reduxjs/toolkit";
import axios from 'axios'
export  const getlist=createAsyncThunk(
  "getlist",async ()=>
    await axios.get('http://localhost:8888/data')
)
const initialState={
  value:0,
}
export const counterSlice=createSlice({
  /**
   * createSlice接收的:一个字符串名来标识该片也就是name,
   * 一个初始状态值initialState,
   * 以及多个reducer函数。
   * 并且为每个 reducer 函数生成动作创建器。
   *  */ 
   name:'counter',
   initialState, //相当于state
   reducers:{ //注意这里加了S,后面导出没加S
    increment:(state)=>{
     /** 
       * Redux Toolkit 允许我们在还原器中编写“可变的(mutable)”逻辑。
       * 它实际上并没有改变状态,因为它使用 Immer 库,
       * 它将检测对"draft state" 的更改,并根据这些更改生成
       * 一个全新的不可变状态
       */
       state.value+=1
    },
    decrement:(state)=>{
        state.value-=1
    },
     incrementByAmount: (state, action) => {
      state.value += action.payload
    },
   },
  //  异步请求extraReducers这里用来处理那些异步操作,走完UserById ,还会走这里
   extraReducers:(builder)=>{
    // 这里的state就是上面的state对象
    builder.addCase(getlist.fulfilled,(state,action)=>{
   console.log('完成中');
      const data = action.payload && action.payload.data; // data为接口返回的data字段
      console.log(data);
    })
  
   }
})
// 为每个 reducer 函数生成动作创建器(Action creators)
// 相当action
export const {increment,decrement,incrementByAmount}=counterSlice.actions
export default counterSlice.reducer

 请求到数据了,接下来就是渲染,这里给一个按钮,点击在控制台输出

Redux最佳实践「Redux Toolkit」_第2张图片

 五,总结

当开始使用Redux时,Redux Toolkit是一个很好的选择。它简化了代码,并通过减少模板代码来帮助管理Redux状态。

这里简要的讲一下这个简单例子的整体的步骤

  • 使用 configureStore 创建 Redux 存储
    • configureStore 接受作为命名参数的 reducer 函数
    • configureStore 自动设置好了默认设置
  • 向 React 应用程序组件提供 Redux 存储
    • 在 组件外包裹 React-Redux < Provider > 组件
    • < Provider store = { store } >
  • 使用 createSlice 创建一个 Redux“ slice”reducer
    • 使用字符串名称、初始 state 和 reducer 函数调用 createSlice
    • Reducer 函数可能使用 Immer“mutate”状态
    • 导出生成的slice reducer 和 action creators
  • 在 React 组件中使用 redux useSelector/useDispatch 挂钩
    • 使用 useSelector 钩子从 store 中读取数据
    • 使用 useDispatch 钩子获取 dispatch 函数,并根据需要进行 dispatch actions 操作

非常感谢你看到这,如果觉得不错的话点个赞 ⭐ 吧

 

你可能感兴趣的:(React,前端,javascript,react.js)