怎么用手机做刷会员网站,网站的内容,修改wordpress后台地址 插件,win2012服务器做网站有同学反馈开发 ReactNative 应用时状态管理不是很明白#xff0c;接下来几篇文章我们来对比下 React 及 ReactNative 状态管理常用的几种框架的使用和优缺点。
上一篇文章介绍了 redux 的使用#xff0c;这篇文章我们来看下 redux 的升级版#xff1a;redux-toolkit。
下…有同学反馈开发 ReactNative 应用时状态管理不是很明白接下来几篇文章我们来对比下 React 及 ReactNative 状态管理常用的几种框架的使用和优缺点。
上一篇文章介绍了 redux 的使用这篇文章我们来看下 redux 的升级版redux-toolkit。
下面是使用 React 和 Redux-Toolkit 创建一个简单的 Todo List App 的代码示例完整代码见文章末尾
首先在命令行中输入以下命令新建一个React应用
npx create-react-app todolist安装 Redux-Toolkit 和 React-Redux
npm install reduxjs/toolkit react-redux创建一个 todoSlice.ts 文件在其中完成 action 和 reducer的创建「非常重要需要保证理解」
import { createSlice, PayloadAction } from reduxjs/toolkit;
import { State, TODO } from ../module/todo;const initState : State {todos: [{text: zsx clean room}]
};//1.创建 Slice每个业务一个 分片
const todoSlice createSlice({name: todo, // 这个名称似乎没啥用initialState: initState,//最重要的 reducers 属性包括多个函数reducers: {addTodo: (state: State, action: PayloadActionstring) {return {todos: [...state.todos, {text: action.payload}]};},deleteTodo: (state: State, action: PayloadActionstring) {state.todos state.todos.filter((item: TODO, index: number) {return item.text ! action.payload});}}
})//2.导出 slice 的 action 和 reducer
export const {addTodo, deleteTodo} todoSlice.actions;
export default todoSlice.reducer;在上面的代码里我们使用 redux-toolkit 的 createSlice 创建了一个分片分片代表某个业务的数据状态处理比如 todoSlice 就代表 todo 业务的所有状态处理。
createSlice 的参数分别包括 name名称似乎没啥用、initialState项目初始状态和 reducers
其中 reducers 是最重要的它就是一个对象: reducers: {addTodo: (...) {//...},deleteTodo: (...) {//...}}对象的成员就是支持的 action 函数比如添加 todo addTodo: (state: State, action: PayloadActionstring) {//可以直接修改数据// state.todos.push({// text: action.payload// })//也可以返回新的return {todos: [...state.todos, {text: action.payload}]};}可以看到上面的 addTodo 类似 redux 中的 reducer不同的在于createSlice 中不再需要根据 action type 进行 switch case 匹配而是直接提供了函数以执行状态。
需要注意的是toolkit 中的 reducer 函数可以修改原始状态redux 本身是需要返回新状态的这是因为它内部的特殊实现。
通过 createSlice 创建完 todoSlice 后下一步就是导出其中的 action 和 reducer
export const {addTodo, deleteTodo} todoSlice.actions;
export default todoSlice.reducer;这里再次证明slice 是 action 和 reducer 的封装redux-toolkit 通过 slice 把 action 和 reducer 封装到了一起不再需要单独创建 action 和 action creator。
通过 redux-toolkit我们创建完 slice就可以通过 slice 的 action 和 reducer 进行使用。
创建 store:
import { configureStore } from reduxjs/toolkit;
import todoReducer from ./todoSlice;//3.配置 store创建全局唯一的 stroe
const store configureStore({//多个 reducer访问数据时也需要通过多层获取//这里的名称决定了获取数据时需要访问的对象名称reducer: {todo: todoReducer}
});export default store;和 redux 不同redux-toolkit 使用 configureStore 创建 store它的好处是当有多个 reducer 时更简单。
只需要在参数里提供一个 reducer 对象即可有多少个业务就给这个对象增加几个成员。
{//多个 reducer访问数据时也需要通过多层获取//这里的名称决定了获取数据时需要访问的对象名称reducer: {todo: todoReducer,other: otherReducer}
}最终业务在访问自己的数据时通过 对象名称可以获取到数据。
上层组件通过 Provider 分发给组件树
const root ReactDOM.createRoot(document.getElementById(root) as HTMLElement
);//分发给子元素
root.render(Provider store{store}ToolkitTodoApp//Provider
);这一点和 redux 一样都是使用 react-redux 的 Provider 提供给子组件参数就是上一步创建的 store。
ToolkitTodoApp 是下一步要创建的 UI 组件
最后一步业务组件中通过 useSelector 和 useDispatch 获取数据和分发行为
import {useState} from react;
import { useDispatch, useSelector } from react-redux;
import { State, TODO } from ../module/todo;
import store from ./store;
import { addTodo, deleteTodo } from ./todoSlice;
type RootState ReturnTypetypeof store.getState;//业务通过 useSelector 获取数据通过 useDispatch 分发
//比如使用 connect更简单易懂
const ToolkitTodoApp () {//获取到的是全局的 State需要通过 reducer 的名称获取到当前需要的状态const todos useSelector((state: RootState) {return state.todo.todos;});const dispatch useDispatch();const [text, setText] useState();const handleInput (e: any) {setText(e.target.value)}const handleAddTodo () {//todoSlice 导出的 action, 参数就是 action.payload 的类型dispatch(addTodo(text))setText()}const handleDeleteTodo (text: string) {dispatch(deleteTodo(text))}return (div style{{display: flex, flexDirection: column, alignItems: center, justifyContent: center}}h1This Is Redux-Toolkit TODO App./h1ul{todos todos.map((todo: TODO, index: any) {return (li key{index}span{todo.text}/spanbutton style{{marginLeft: 12px}} onClick{() handleDeleteTodo(todo.text)}finish/button/li)})}/uldiv style{{display: flex, flexDirection: row}}input value{text} onChange{handleInput}/button onClick{handleAddTodo}Add Todo/button/div/div)
}export default ToolkitTodoApp;从上面的代码中可以看到使用 redux-toolkit组件里获取状态也更简单了不再需要写 connect、mapStateToProps 和 mapDispatchToProps只需要通过 react-redux 提供的 useSelector hook 即可: const todos useSelector((state: RootState) {return state.todo.todos;});需要注意的是useSelector 里筛选自己需要的数据时需要通过 reducer 的名称获取到当前需要的状态否则会出现字段取不到或者取错的情况。
比如上面的例子里配置 store 时todo 的 reducer 的名称叫 “todo”那在 todo 业务里通过useSelector 里获取它 state 时就需要通过这个名称 “todo” 去拿字段
const store configureStore({//多个 reducer访问数据时也需要通过多层获取//这里的名称决定了获取数据时需要访问的对象名称reducer: {todo: todoReducer}
});state.todo.todos;我一开始使用 redux-toolkit 的时候就在这一步遇到了问题。
另外使用 useDispatch 分发行为时也需要注意传递的参数是 createSlice 后导出的 action参数类型需要和 这个 action 的 payload 类型一样。
比如前面的 todoSlice 的 reducers 里addTodo 的 action 类型是 PayloadAction
addTodo: (state: State, action: PayloadActionstring) {...}那在调用这个 action 时就需要传递 string 类型的参数 const handleAddTodo () {//todoSlice 导出的 action, 参数就是 action.payload 的类型dispatch(addTodo(text))setText()}总结一下通过 redux-toolkit 管理状态分这几步 通过 createSlice 创建 slice在其中指定初始状态和支持的 action reducer 导出 slice 的 actions 和 reducer 通过 configureStore 创建 store参数是一个对象包括上一步导出的 reducer 需要指定好业务名称后续取数据要用 通过 Provider 分发给组件树 业务组件中通过 useSelector 和 useDispatch 获取数据和分发行为
可以看到redux-toolkit 与 redux 相比不需要创建 action creator 和 connect简化了开发步骤。
完整代码https://github.com/shixinzhang/redux-sample/tree/main/src/redux-toolkit
