Redux Toolkit 使用指南

前端精髓

共 1828字,需浏览 4分钟

 ·

2021-08-31 09:05


以前我们使用 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.actions
const 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/


浏览 21
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报