网站建设有利点,合肥优化网站,app制作软件哪个好,ccyycom服务器react中使用状态管理的方式也很多#xff0c;比如redux和mobx等#xff0c;今天这一片就讲一下redux的入门到熟练使用#xff0c;主要是要理解它redux的组成有哪些#xff0c;到怎么创建#xff0c;和组建中怎么使用三个问题。这里先放上官网文档#xff0c;不理解的地方…react中使用状态管理的方式也很多比如redux和mobx等今天这一片就讲一下redux的入门到熟练使用主要是要理解它redux的组成有哪些到怎么创建和组建中怎么使用三个问题。这里先放上官网文档不理解的地方可以看看官方文档
redux官方文档Redux 中文文档 · Redux
rematch文档Installation | Rematch 第一步创建一个简单的react项目
我这里使用vite直接创建了一个最简单的react项目vite相比webpack还是简单了vite官网开始 | Vite 官方中文文档。 使用命令
npm create vite
然后输入项目名和选择的框架等就可以了 开始 | Vite 官方中文文档。 使用命令 第二步安装redux和相关依赖
安装redux和react-redux
npm install --save redux// 依赖包
npm install --save react-redux
安装rematch/corn
npm install rematch/core 第三步创建store和使用store
在项目目录下面创建一个store文件夹然后管理状态 创建store的前提是先创建有modelmodel是管理不同的数据状态的最小模块 比如usergamegood等不同的模块存储不同的数据状态。model长什么样呢里面的namestatereducerseffets都是干什么的呢 state 存放模块状态的地方。 reducers 改变store状态的地方每个reducers函数都会返回一个对象作为模块最新的state。reducers中的函数必须为同步函数如果要异步处理数据需要在effects中处理。注意只能通过在reducers的函数中通过返回一个新的对象来改变模块中state的值直接通过修改state的方式是是不能改变模块的state的值。例 increment(state, num1) { state.num num1 // 这样的写法是错误的},effects 处理异步数据的地方比如异步从服务端获取数据。注意在effects中是不能修改模块的state需要在异步处理完数据后调用reducers中的函数修改模块的state。 rematch的state、reducers、effects和vuex的state、mutaition、action用法非常相似在vuex中mutation修改model的state的值action进行异步处理数据。 下面是一个我写的用户模块
export default {// model名字name: user,// 默认初始状态state: {userName: 用户名,age: 0},reducers: {setUser(state: any, name: any, age: any) {return {...state,userName: name,age: age}}},effects: (dispatch: any) ({async getInfoAsync(userId: any, rootState: any) {// 模拟调用服务器数据console.log(用户信息, userId, rootState)// 模拟服务器请求两秒后await new Promise((resolve) setTimeout(resolve, 2000))// 使用this.调用的方式:ts会报错的所以推荐使用下面的dispatch调用// this.increment()// 使用dispatch调用dispatch.user.setUser(王思聪, 38)}})
}有了model就可以创建store了store怎么创建呢里面的models是干什么的呢
初始化store的时候rematch支持传入多个模块在中、大型项目中可以根据业务的需要拆分成多个模块这样项目的结果就会变得清晰明了所以store里面的models可以存储好多个模块
import { init } from rematch/core
import user from ./userconst store init({models: {user}
})export default store最后还需要将store挂载到App根节点上这样下面的所有子组件就可以使用store了 第四步组建中使用和修改store状态
在子组件中使用store的方式使用hooks的方式会很方便
import { useSelector, useDispatch } from react-redux
import ./App.cssfunction App() {// 使用hooks的方式引用数据和修改数据user就是不同的模块const userStore useSelector((state: any) state.user)const dispatch useDispatch().userconst setUser () {console.log(修改用户名, dispatch)// 调用异步函数修改dispatch.getInfoAsync(123)}return (div classNameapp-maindivspan用户名/span{userStore.userName}/divdivspan年龄/span{userStore.age}/div{/* 点击修改年龄 */}divbutton onClick{setUser}修改store信息/button/div/div/)
}export default App第五步安装redux-devtools协助开发
使用redux-devtools可以很方便的管理和查看redux里面的数据结构和状态 redux总结
省略了action types
不必再多次写字符串使用model/method代替
省略了action creators
直接调用方法不必再生产action type原版dispatch方法返回{type, payload}使用dispatch.model.method代替
省略了switch语句
调用model.method方法不必判断action type ( 原本reduces中)
集中书写状态同步和异步方法
在一个model中使用statereducers和effects来写状态同步和异步方法
