广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何使用ReduxToolkit简化Redux
  • 114
分享到

如何使用ReduxToolkit简化Redux

ReduxToolkitReduxToolkit原理 2022-12-22 12:12:17 114人浏览 泡泡鱼
摘要

目录一、安装Redux Toolkit和React-Redux二、创建Redux Store三、在React中使用Redux Store四、创建一个Redux State Slice

一、安装Redux Toolkit和React-Redux

注: “@reduxjs/toolkit”: “^1.8.6”, “react-redux”: “^8.0.4”

npm install @reduxjs/toolkit react-redux

二、创建Redux Store

从Redux Toolkit里引入configureStore,我们将从创建和导出一个空的Redux store开始。

store/index.js
// 使用rtk来创建store
import { configureStore } from '@reduxjs/toolkit'
import useReducer from './userSlice'

const store = configureStore({
  reducer: {
    user: useReducer
  }
})
export default store

三、在React中使用Redux Store

我们就可以在src/index.js文件中用React-Redux提供的包裹我们的应用,这样我们就可以在React组件中使用React store了

具体操作就是先引入我们刚刚创建的Redux store,然后用包裹你的,再将store作为一个prop传入。

src/index.js

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

四、创建一个Redux State Slice

slice需要一个name作为唯一标识,需要有初始化state值,还需要至少一个reducer方法来定义state如何变化。一旦slice创建完成我们就可以导出生成的Redux action creators和整个slice的reducer方法。

Redux需要我们通过制作数据副本和更新副本来不可变地更新state。然而Redux Toolkit的createSlice 和 createReducer api内部使用了Immer,这允许我们可以直接写更新逻辑,不必制作副本,它将自动成为正确的不可变更新。

userSlice.js文件

// 切片对象
import { createSlice } from '@reduxjs/toolkit'

const userSlice = createSlice({
  name: 'zhangsan', // 标识符,生成actions的时候要使用,
  // state初始值
  initialState: {
    name: '张三',
    age: 18,
    gender: '男'
  } ,
  // reducer的具体方法,
  reducers: {
    // 指定state的各种操作,直接就可以在对象中添加方法
    setName(state, action) {
      
      state.name = action.payload
    },
    setAge(state, action) {
      state.age = action.payload
    }
  }
})

// 实际开发中,setName,setAge对外暴露,
export const { setName, setAge } = userSlice.actions
export default userSlice.reducer

五、在React组件中使用Redux State和Action

现在我们可以使用React-Redux钩子在React组件中操作Redux store。我们可以使用useSelector从store中读取数据,也可以使用useDispatch来dispatch actions。

src/App.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setName, setAge } from './store/userSlice'
export default function App() {
  const user = useSelector(state => state.user)
  const dispatch = useDispatch()
  const setNameHandler = () => {
    dispatch(setName('李四'))
  }
  const setAgeHandler = () => {
    dispatch(setAge(20))
  }
  return (
    <div>
      <h1>{user.name}</h1>
      <h1>{user.age}</h1>
      <h1>{user.gender}</h1>
      <button onClick={setNameHandler}>修改name</button>
      <button onClick={setAgeHandler}>修改年龄</button>
    </div>
  )
}

以上是关于如何在React中设置和使用 Redux Toolkit的简要概述。回顾细节:

1、使用configureStore创建一个Redux Store

  • configureStore接收reducer方法作为命名参数,或者说作为reducer对象的属性
  • configureStore会使用默认设置自动设置好store

2、在React组件中使用 Redux store

  • 用React-Redux提供的 包裹你的
  • 使用 传入Redux store

3、使用createSlice创建Redux “slice” reducer

  • createSlice需要有name属性作为唯一标识,还需要初始化state和已命名的reducer方法
  • Reducer方法通过使用Immer可以直接“改变”state,而不必手动做副本
  • 导出生成的slice reducer 和 action creators

4、在React组件中使用React-Redux的useSelector/useDispatch钩子

  • 使用useSelector钩子从store中读数据
  • 使用useDispatch钩子获取到dispatch方法,并且根据需要dispatch actions

到此这篇关于如何使用Redux Toolkit简化Redux的文章就介绍到这了,更多相关Redux Toolkit内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 如何使用ReduxToolkit简化Redux

本文链接: https://www.lsjlt.com/news/175539.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用ReduxToolkit简化Redux
    目录一、安装Redux Toolkit和React-Redux二、创建Redux Store三、在React中使用Redux Store四、创建一个Redux State Slice...
    99+
    2022-12-22
    Redux Toolkit Redux Toolkit原理
  • 如何使用Redux Toolkit简化Redux
    目录Redux Toolkit解决的问题它包括什么?Redux Toolkit API的主要功能?createSlice有什么特别之处?处理异步Redux流最后的想法了解Redux ...
    99+
    2022-11-12
    使用Redux Toolkit Redux Toolkit简化Redux
  • 如何使用react-redux
    本文小编为大家详细介绍“如何使用react-redux”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何使用react-redux”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。...
    99+
    2022-10-19
    react redux
  • Redux Hooks如何使用
    这篇文章主要介绍“Redux Hooks如何使用”,在日常操作中,相信很多人在Redux Hooks如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Redux Hooks如何使用”的疑惑有所帮助!接下来...
    99+
    2023-07-04
  • React中如何使用Redux
    这篇文章主要讲解了“React中如何使用Redux”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“React中如何使用Redux”吧!Redux 是一种状态容器 JS 库,提供可预测的状态管理...
    99+
    2023-07-02
  • React/Redux应用如何使用Async/Await
    小编给大家分享一下React/Redux应用如何使用Async/Await,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Asyn...
    99+
    2022-10-19
    react async await
  • 如何在React中直接使用Redux
    React中使用Redux 开始之前需要强调一下,redux和react没有直接的关系,你完全可以在React, Angular, Ember, jQuery, or vanilla...
    99+
    2022-11-13
    React使用Redux React Redux用法
  • 在小程序里如何使用Redux
    这篇文章主要介绍在小程序里如何使用Redux,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在小程序里使用 Redux 进行状态管理, Redux 是一个前端状态管理的容器,对于...
    99+
    2023-06-26
  • ReactNative状态管理redux-toolkit如何使用
    今天小编给大家分享一下ReactNative状态管理redux-toolkit如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解...
    99+
    2023-07-05
  • 在React-Native中如何持久化redux数据
    这篇文章主要为大家展示了“在React-Native中如何持久化redux数据”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“在React-Native中如何持久...
    99+
    2022-10-19
    react-native redux
  • 如何使用ES6简化代码
    小编给大家分享一下如何使用ES6简化代码,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!使用 ES6 简化代码ES6 已经发展很多年了,兼容性也已经很好了。恰当地使...
    99+
    2023-06-27
  • WPF中如何使用CallerMemberName简化InotifyPropertyChanged
    这篇文章主要介绍“WPF中如何使用CallerMemberName简化InotifyPropertyChanged”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“WPF中如何使用CallerMembe...
    99+
    2023-07-02
  • 如何使用jQuery简化Ajax开发
    这篇文章主要为大家展示了“如何使用jQuery简化Ajax开发”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用jQuery简化Ajax开发”这篇文章吧。j...
    99+
    2022-10-19
    jquery ajax
  • 如何使用顶层await简化JS
    这篇文章将为大家详细讲解有关如何使用顶层await简化JS,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JavaScript 是一种流行的编程语言,最初被设计为单线程和同...
    99+
    2022-10-19
    await js
  • 如何使用Python的简化方法
    这篇文章给大家分享的是有关如何使用Python的简化方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。逻辑回归的目标是什么?在逻辑回归中,我们希望根据一个或多个自变量(X)对因变量(Y)进行建模。这是一种分类方法...
    99+
    2023-06-04
  • react-redux集中式状态管理及基本使用与优化
    目录1、react-redux2、连接容器组件与UI组件3、react-redux基本使用优化1、简写mapState和mapDispatch两个映射方法优化2、Provider组件...
    99+
    2022-11-13
    react-redux集中式状态管理 react-redux状态管理
  • C#如何使用MessageHandler简化消息处理
    这篇文章主要介绍“C#如何使用MessageHandler简化消息处理”,在日常操作中,相信很多人在C#如何使用MessageHandler简化消息处理问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C#如何使...
    99+
    2023-07-02
  • 详解如何使用MyBatis简化JDBC开发
    目录1. 前言2. JDBC 存在的缺点3. MyBatis 优化4. MyBatis 快速入门5. 总结1. 前言 JavaEE 企业级 Java 项目中的经典三层架构为表现层,业...
    99+
    2023-01-29
    MyBatis简化JDBC开发 MyBatis简化JDBC MyBatis JDBC
  • springboot如何单独使用feign简化接口调用
    这篇文章主要介绍了springboot如何单独使用feign简化接口调用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。单独使用feign简化接口调用与HttpClient和R...
    99+
    2023-06-29
  • JavaScript如何简化switch
    这篇文章主要介绍了JavaScript如何简化switch,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 简化 switch这个技巧也很常用,把switch 转换成...
    99+
    2023-06-27
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作