您现在的位置是:首页 > 正文

React中使用Redux Toolkit

2023-11-06 15:37:21阅读 153

*Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法**。

Redux Toolkit介绍

Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法

在我们日常react项目中使用Redux状态管理的时候应该已经发现,redux的编写逻辑过于的繁琐和麻烦。
并且代码通常分拆在多个文件中(虽然也可以放到一个文件管理,但是代码量过多,不利于管理);
Redux Toolkit包旨在成为编写Redux逻辑的标准方式,从而解决上面提到的问题;
在很多地方为了称呼方便,也将之称为“RTK”

redux tookit官网

https://redux-toolkit.js.org/

安装Redux Toolkit

npm install @reduxjs/toolkit react-redux

redux/tookit常用API

configureStore: 包装createStore以提供简化的配置选项和良好的默认值。
它可以自动组合你的 slice reducer,添加你提供 的任何 Redux 中间件,
redux-thunk默认包含,并启用 Redux DevTools Extension。
​
createSlice: 接受reducer函数的对象、切片名称和初始状态值,并自动生成切片reducer,并带有相应的actions。
​
createAsyncThunk: 接受一个动作类型字符串和一个返回承诺的函数,并生成一个pending/fulfilled/rejected基于该承诺分 派动作类型的 thunk

创建store文件

//引入tookit
import { configureStore } from '@reduxjs/toolkit'
//引入reducer slice
import { reducer } from './reducers/user'
//创建store
const store = configureStore({
    //放置单独reducer切片   默认多合一
    reducer: {
        users: reducer
    },
    devTools: true
});
​
export default store;

创建slice切片

//引入reducer
import { createSlice } from '@reduxjs/toolkit'
//创建slice
const userSlice = createSlice({
    name: "User", //切片名称
    initialState: {
        count: 0
    },
    //类似事件类型
    reducers: {
        increment(state, action) {
            console.log(state, action);
            let { payload } = action;
            state.count += payload;
        }
    },
});
​
​
//导出对应的action
export const { increment } = userSlice.actions;
//导出当前的reducer
export const reducer = userSlice.reducer; 

关联到react项目

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { Provider } from 'react-redux'
import store from './store/index'
​
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
​
)

组件中直接使用

import { useDispatch, useSelector } from "react-redux"
import { increment } from './store/reducers/user'
export default () => {
  let state = useSelector(state => state);
  let dispatch = useDispatch();
  console.log(state);
​
  let add = () => {
    //触发动作
    dispatch(increment(1));
  }
  return <>
    <div>测试---{state.users.count}
      <button onClick={add}>++</button>
    </div>
  </>
}

异步的thunk

创建异步的thunk
//引入reducer
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
//创建异步thunk
export let userLoginThunk = createAsyncThunk("fetchlogin", async (args) => {
    let res = await 123;
    return res;
});
//创建slice
const userSlice = createSlice({
    name: "User",
    initialState: {
        count: 0
    },
    //类似事件类型
    reducers: {
        increment(state, action) {
            console.log(state, action);
            let { payload } = action;
            state.count += payload;
        }
    },
    //监听异步的结果
    extraReducers: {
        [userLoginThunk.fulfilled](state, action) {
            let { payload } = action;
            console.log(state, payload);
            state.count = payload
        }
    }
});
​
​
//导出对应的action
export const { increment } = userSlice.actions;
//导出当前的reducer
export const reducer = userSlice.reducer; 

文章来源:https://blog.csdn.net/weixin_46672437/article/details/130285369
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:https://www.dflian.com/997.html

网站文章

  • 4.3 传送门

    现在有 n 个传送门,你处在第一个传送门的位置,第 i 个传送门可以将你传送到第 i-a[i] 到第 i+a[i] 范围内的任意一个传送门,请问你最少需要几次操作,使得你可以传送到最后一个传送门的位置。保证题目一定有解。

    2023-11-06 15:37:19
  • 关于面试高频问题之--字符串匹配问题

    关于面试高频问题之--字符串匹配问题

    字符串匹配问题是面试的高频问题之一,本文讲字符串和它的相关操作。 1. 字符串是什么 字符串(string) 是由 n 个字符组成的一个有序整体( n &gt;= 0 )。例如,s = “BEIJIN...

    2023-11-06 15:37:15
  • 数据库三大范式(图文详解)

    数据库三大范式(图文详解)

    范式是数据库设计时遵循的一种规范,不同的规范要求遵循不同的范式。

    2023-11-06 15:37:11
  • 呕心沥血之作--手把手教你面试

    Hi,各位老铁们,刚刚拿到java后端大厂的offer,特来分享下面试心得,也是经过一个月的时间准备,再加上两个月的面试历程总结出来的,希望对各位老铁有所帮助,也祝愿各位老铁找到心仪工作。 关于自我介...

    2023-11-06 15:37:08
  • Vue3 + ESLint + Prettier

    Vue3 + ESLint + Prettier

    [email protected] + Vue3 + ESLint + Prettier

    2023-11-06 15:36:58
  • 细节决定成败!jdbc的List<?> qryList4Sql(String sql)报错-标志符过长

    就看到了原因,原来是最开始的写法,ID的具体数据没有加''引号,执行的时候就识别不出来,当成了一个整体去执行,所以就报错了。1. sql语句的执行选用的是jdbc提供的List

    2023-11-06 15:36:56
  • 【SpringBoot】数据校验API

    【SpringBoot】数据校验API

    开启数据校验,有助于系统安全性,**J2EE规范**中**JSR303规范**定义了一组有关数据校验的**API**

    2023-11-06 15:36:52
  • java.lang.IllegalStateException错误原因以及解决方法

    Servlet.service() for servlet default threw exception java.lang.IllegalStateException at org.apache.catalina.connector.ResponseFacade.sendError(ResponseFacade.java:407) at org.apache.struts2.d

    2023-11-06 15:36:44
  • 国产化Kettle、JDK、MySQL下载安装操作步骤

    国产化Kettle、JDK、MySQL下载安装操作步骤

    Kettle、JDK、MySQL下载安装操作步骤

    2023-11-06 15:36:33
  • vscode终端 因为在此系统上禁止运行脚本问题的解决方法

    vscode终端 因为在此系统上禁止运行脚本问题的解决方法

    错误提示: vue : 无法加载文件 E:\node\hao\node_modules.bin\vue.ps1,因为在此系统上禁止运行脚本。 解决方法: 方法1、在VScode控制台修改权限以管理员身份打开VScode, 并执行 Set-ExecutionPolicy RemoteSigned 方法2、在cmd执行相同的语句Set-ExecutionPolicy RemoteSigned,并...

    2023-11-06 15:36:21