Taro react 数据管理之redux

React Redux

在 Taro 中可以自由地使用 React 生态中非常流行的数据流管理工具 Redux 来解决复杂项目的数据管理问题。

Redux 安装

这里需要安装两个，一个是 redux 一个是 react-redux

同样，需要配合 包管理工具 逆行安装

# 可以根据个人爱好其他包管理工具进行安装
$ npm i redux react-redux
# yarn 二选一即可
$ yarn add redux react-redux

使用(数据获取)

1. 创建仓库

在 src 目录下新增 store 文件夹【文件夹命名规则非强制，不过是一个约定俗成的说法，可以自定义名称】 并在 store 文件夹内新增 index.ts 文件，表示 redux

效果如下:

2. 创建redux

新版 redux 采用的是 legacy_createStore 方法创建仓库，若旧版,采用的是 createStore 首先，需要引入 legacy_createStore

import { legacy_createStore } from 'redux' 

legacy_createStore 是一个方法，需要接收 reducer(即一个方法)效果类似：

import reducer from './reducer'
const store = legacy_createStore(reducer)
// reducer 是我们接下来的一步的内容

export default store

3. 编辑reducer

reducer 同样是一个方法 该方法接收两个参数 state 和 action
state 代表的是仓库，它定义了我们redux中存放哪些数据

// 比如，我现在有一个叫 defaultState 的变量，用它作为我的仓库
// 该仓库中有一个叫做user的数据
const defaultState: {user: any} = {
    user: {}
}

那么 现在的 reducer 就编辑为如下内容

// action暂时没涉及，暂定any类型
// state 的数据类型上文有提及 = defaultState 是给state一个默认值
const reducer = (state: {user:any} = defaultState, action: any) => {
    // reducer方法
}

reducer方法需要返回的是一个state

因此，上文的方法可以拓展为

// action暂时没涉及，暂定any类型
// state 的数据类型上文有提及 = defaultState 是给state一个默认值
const reducer = (state: {user:any} = defaultState, action: any) => {
    return state
}

但是，reducer 是不允许直接修改 state 的，我们想要修改，只需要拷贝一下 state

// action暂时没涉及，暂定any类型
// state 的数据类型上文有提及 = defaultState 是给state一个默认值
const reducer = (state: {user:any} = defaultState, action: any) => {
    const newState = JSON.parse(JSON.stringify(state))
    return newState
}
// 最后，只需要导出一下 reducer 即可正常使用
export default reducer

目前效果如下：

4. 页面中使用

4.1 修改 项目入口文件

将原先项目中 src 目录下的 app.ts 修改为 app.tsx 文件

4.2 引入 Provider

Provider可以理解成一个是一个ReactNode节点(当然，不完全是)
redux需要包裹在Provider中 Provider中需要一个必传 的 store 参数，就是我们之前说的 redux 的 store

因此，原来的 app.tsx

// src/app.tsx
import { useEffect } from 'react'  
import { useDidShow, useDidHide } from '@tarojs/taro'  
// 全局样式  
import './app.scss'  
  
function App(props) {  
// 可以使用所有的 React Hooks  
useEffect(() => {})  
  
// 对应 onShow  
useDidShow(() => {})  
  
// 对应 onHide  
useDidHide(() => {})  
  
return props.children  
}  
  
export default App

需要修改为

// src/app.tsx
import { useEffect } from 'react'  
import { useDidShow, useDidHide } from '@tarojs/taro'  
// 全局样式  
import './app.scss'  

// 这里引入
import { Provider } from 'react-redux'  
import store from './store'  

function App(props) {  
// 可以使用所有的 React Hooks  
useEffect(() => {})  
  
// 对应 onShow  
useDidShow(() => {})  
  
// 对应 onHide  
useDidHide(() => {})  
  // 这里出现变化
return <Provider store={ store }>  
{ props.children }  
</Provider>  
}  
  
export default App

效果如下:

4.3 在页面中使用

随便找个页面， 比如首页 src/pages/index/index.tsx 现在react最优秀的地方在于react hooks 因此，直接使用hooks
useSelector 就是 react-redux 提供的 hooks

// 引入部分
import { useSelector } from 'react-redux'
// 正常使用
const { user }: { user: any } = useSelector((state: any) => ({  
    user: state.user  
}))

使用(数据修改)

1.1 reducer修改

这里才要对上文没提及的 action 进行编辑了 action 的数据类型为 {type: string, val: any}
type 类型为 string
val 类型为 任意 val是我们最后修改的数据

在 reducer 中 通过 switch 可以对 action 的 type 进行区分 并根据 action 的 val 修改相对应的数据

1.2 reducer使用

reducer 修改 其实也是类似于 vuex 通过 useDispatch 函数(hooks) 进行操作

// 引入 useDispatch
import { useDispatch } from 'react-redux'
// hooks 使用
const dispatch = useDispatch()

结束

至此，reducer 已经可以完整使用了