react中使用redux最简单最方便的方式，配合rematch简化操作，5分钟学会

男娘i 2024-02-05 18:20 5阅读 0赞

![13d348fadf724dbcb652817cf631f10f.jpeg][]react中使用状态管理的方式也很多，比如redux和mobx等，今天这一片就讲一下redux的入门到熟练使用，主要是要理解它redux的组成有哪些，到怎么创建，和组建中怎么使用三个问题。这里先放上官网文档，不理解的地方可以看看官方文档：

redux官方文档：[Redux 中文文档 · Redux][Redux _ _ Redux]

rematch文档：[Installation | Rematch][Installation _ Rematch]

##  ##

## 第一步，创建一个简单的react项目 ##

我这里使用vite直接创建了一个最简单的react项目，vite相比webpack还是简单了，vite官网：[开始 | Vite 官方中文文档。 使用命令：][_ Vite _]

npm create vite

然后输入项目名和选择的框架等就可以了：

![a0605adcd3174de4b94691448ff660ee.png][]

[开始 | Vite 官方中文文档。 使用命令：][_ Vite _]

##  ##

## 第二步，安装redux和相关依赖 ##

安装redux和react-redux：

npm install --save redux
    
    // 依赖包
    npm install --save react-redux

安装@rematch/corn：

npm install @rematch/core

##  ##

## 第三步，创建store和使用store ##

在项目目录下面创建一个store文件夹，然后管理状态：

![33928a7f9ac44cf6bc19536bc4d31ec0.png][]

创建store的前提是先创建有model，model是管理不同的数据状态的最小模块 ，比如user，game，good等不同的模块存储不同的数据状态。model长什么样呢？里面的name，state，reducers，effets都是干什么的呢？

>  *  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 './user'
    
    const store = init({
      models: {
        user
      }
    })
    
    export default store

最后还需要将store挂载到App根节点上：这样下面的所有子组件就可以使用store了

![88d9048907a8407bb5748a02b79c3464.png][]

## 第四步，组建中使用和修改store状态 ##

在子组件中使用store的方式：使用hooks的方式会很方便

import { useSelector, useDispatch } from 'react-redux'
    import './App.css'
    
    function App() {
      // 使用hooks的方式引用数据和修改数据：user就是不同的模块
      const userStore = useSelector((state: any) => state.user)
      const dispatch = useDispatch().user
    
      const setUser = () => {
        console.log('修改用户名', dispatch)
        // 调用异步函数修改
        dispatch.getInfoAsync('123')
      }
    
      return (
        <>
          <div className='app-main'>
            <div>
              <span>用户名：</span>
              {userStore.userName}
            </div>
            <div>
              <span>年龄：</span>
              {userStore.age}
            </div>
            {/* 点击修改年龄 */}
            <div>
              <button onClick={setUser}>修改store信息</button>
            </div>
          </div>
        </>
      )
    }
    
    export default App

## 第五步，安装redux-devtools协助开发 ##

使用redux-devtools可以很方便的管理和查看redux里面的数据结构和状态：

![e51b9377ed8d49ceaf8058315d6bc6d5.png][]

## redux总结 ##

##### 省略了action types #####

不必再多次写字符串，使用model/method代替

##### 省略了action creators #####

直接调用方法，不必再生产action type（原版dispatch方法返回\{type, payload\}），使用dispatch.model.method代替

##### 省略了switch语句 #####

调用model.method方法，不必判断action type ( 原本reduces中)

##### 集中书写状态，同步和异步方法 #####

在一个model中使用state，reducers和effects来写状态，同步和异步方法

[13d348fadf724dbcb652817cf631f10f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/6256668ce1bc4a239d2a4bc1c0dd1e42.png
[Redux _ _ Redux]: https://www.redux.org.cn/
[Installation _ Rematch]: https://rematchjs.org/docs/getting-started/installation
[_ Vite _]: https://cn.vitejs.dev/guide/
[a0605adcd3174de4b94691448ff660ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/2a6fa72022944efb847ee217c72ae939.png
[33928a7f9ac44cf6bc19536bc4d31ec0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/db77f6e7959d481e98fa6c32dbcbc684.png
[88d9048907a8407bb5748a02b79c3464.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/578bbe1b93a1489f994f85b59ec3217b.png
[e51b9377ed8d49ceaf8058315d6bc6d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/c7470d02325c4062b99d0a2bb1c54b67.png