Redux Toolkit 使用指南
以前我们使用 Redux,通常是指 Redux + React Redux 组合方案,但是现在有了更简化的方案:Redux Toolkit + React Redux,它帮助我们避免了 Redux 的三个常见问题:
1."配置一个 Redux 存储太复杂了"2."我必须添加很多包才能让 Redux 做任何有用的事情"3."Redux 需要太多样板代码"
Redux Toolkit 简化了编写 Redux 逻辑和设置 store 的过程,允许我们编写更容易阅读的更短的逻辑,同时仍然遵循相同的 Redux 行为和数据流。
安装 react-toolkit
npm install @reduxjs/toolkit --save
示例代码:
import { createSlice, configureStore } from '@reduxjs/toolkit'const counterSlice = createSlice({name: 'counter',initialState: {value: 0},reducers: {incremented: state => {state.value += 1},decremented: state => {state.value -= 1}}
})export const { incremented, decremented } = counterSlice.actionsconst store = configureStore({reducer: counterSlice.reducer
})store.subscribe(() => console.log(store.getState()))
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}
Redux工具包 包含了如下API:
configureStore(): 包装 createStore 以提供简化的配置选项和良好的默认预设。它可以自动组合你的切片 reducers,添加您提供的任何 Redux 中间件,默认情况下包含 redux-thunk ,并允许使用 Redux DevTools 扩展。
createReducer(): 为 case reducer 函数提供 action 类型的查找表,而不是编写switch语句。此外,它会自动使用immer 库来让您使用普通的可变代码编写更简单的 immutable 更新,例如 state.todos [3] .completed = true 。
createAction(): 为给定的 action type string 生成一个 action creator 函数。函数本身定义了 toString(),因此它可以用来代替 type 常量。
createSlice(): 接受一个 reducer 函数的对象、分片名称和初始状态值,并且自动生成具有相应 action creators 和 action 类型的分片reducer。
createAsyncThunk: 接受一个 action type string 和一个返回 promise 的函数,并生成一个发起基于该 promise 的pending/fulfilled/rejected action 类型的 thunk。
createEntityAdapter: 生成一组可重用的 reducers 和 selectors,以管理存储中的规范化数据 createSelector 组件 来自 Reselect 库,为了易用再导出。
官方文档:https://redux-toolkit.js.org/
中文:https://redux-toolkit-cn.netlify.app/
Redux Toolkit 使用指南相关推荐
- 【视频】React redux toolkit创建状态切片
React redux toolkit创建状态切片
- 使用 Redux Toolkit 和 RTK 查询创建 React 应用程序
您是否曾经想将 Redux 与 React Query 提供的功能一起使用?现在,您可以使用 Redux Toolkit 及其最新添加的功能:RTK Query. RTK Query 是一种高级数据获 ...
- 知乎日报项目前端+后端-React18 + React-Router6 + React-redux + redux/toolkit
地址 前端:https://github.com/superBiuBiuMan/-zhuhu_daily 后端:https://github.com/superBiuBiuMan/zhihu-dail ...
- Coolite Toolkit入门指南
Coolite Toolkit 简介 Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件 Coolite Toolkit是基于跨浏览器的ExtJS 库开发而来的,并且简化了 ...
- MVVM Light Toolkit使用指南
原文地址: https://blog.csdn.net/ldld1717/article/details/77040077 概述 MVVM Light Toolkit是一个Android MVVM ...
- Redux初学者指南
by Safeer Hayat 通过更安全的哈亚特 Understanding Redux as a beginner can be quite confusing. Redux has an abu ...
- 建议收藏,最全ChatGPT 中文调教指南:提供各个领域的角色提示词(prompts)及使用技巧,当然也有不正经指南
ChatGPT是一种基于GPT(Generative Pre-trained Transformer)模型的聊天机器人,能够回答用户提出的问题和进行对话.它是由OpenAI开发的人工智能产品,具有自然 ...
- ChatGPT 中文调教指南。各种场景使用指南。学习怎么让它听你的话
ChatGPT是由OpenAI训练的一款大型语言模型,能够生成类人文本. 您只需要给出提示或提出问题,它就可以生成你想要的东西. 在此页面中,您将找到可与 ChatGPT 一起使用的各种提示. 正经指 ...
- ChatGPT 调教指南
ChatGPT 调教指南指南 该文章翻译自GitHub:https://github.com/f/awesome-chatgpt-prompts 同时强推文章:ChatGPT及各种AI网站集合清单! ...
最新文章
- android区块链 钱包_区块链研究实验室|从Android调用区块链智能合约
- 启动一个线程是用run()还是start()?
- 【运维】Linux 系统 之 SSH
- BZOJ[1713][Usaco2007 China]The Bovine Accordion and Banjo Orchestra 音乐会 二维斜率优化
- Android实现顶层全局窗口,不依赖于Activity的Android全局悬浮窗的实现
- 【MYSQL】总结MySQL中对表内容的关联运算(join)
- 精讲Java NIO
- 分享一个CSS3的网格系统架构 - ResponsiveAeon
- burpsuite全套使用教程
- 创建一个自己的GitHub,创建自己的开源项目
- 数据库连接和异常处理的几种常用方法
- ES6新特性 - const let var
- ubuntu下eclipse搭建安卓开发环境
- 基于Yolov5目标检测的物体分类识别及定位 -- 全过程总结
- python将缺失值用0代替_平滑而不使用零填充缺失值
- 懒人查看python源码方法
- 以太坊Swarm Bzz节点云解决方案
- C# LINQ 语法备忘-刘欣
- 乐动手环app下载安装_乐动健康下载app_乐动健康下载安装app手环v2.34
- 锂离子电池热失控的机理
热门文章
- 曾被“劝退”的 C++ 20 正式发布!
- 小鹏汽车CEO疑似隔空回应偷窃技术传闻;​苹果明年新款iPhone将使用增强版5nm芯片;Windows诞生35周年|极客头条...
- 微软智能语音多情感技术升级,晓晓中文语音突破14种风格
- OpenCV AI Kit (OAK) 创始人Brandon Gilles访谈全记录
- 编程不努力,老大徒伤悲
- 4 月 29 日晚 8 点,为你揭秘联邦学习背后数据可用不可见的奥秘
- 具备系统级影像技术解决方案,荣耀30系列向“唯参数论”宣战
- 我敲的不是代码,而是……
- 80% 的 Android 应用正使用加密流量!
- 程序员去交友网站找女友,结果意外了...