安装依赖

执行以下命令安装Redux和依赖包

  1. yarn add react-redux redux dva-core dva redux-logger dva-loading

1、增加store的目录文件

目标=> src/store/index.ts

  1. ├─store // 创建目录
  2. |   ├─dva.ts
  3. |   ├─index.ts

image.png

往[ src/store/dva.ts ] 添加内容

  1. import { create } from 'dva-core'
  2. import { createLogger } from 'redux-logger'
  3. import createLoading from 'dva-loading'
  5. let app, store, dispatch, registered
  7. function createApp(options?: any) {
  8.   const { models } = options
  9.   if (process.env.NODE_ENV === 'development') {
  10.     // 是否打印redux变化的日志
  11.     options.onAction = [createLogger()]
  12.   }
  13.   app = create({ ...options })
  14.   app.use(createLoading({}))
  15.   if (!registered) models.forEach((model) => app.model(model))
  16.   registered = true
  17.   app.start()
  19.   store = app._store
  20.   app.getStore = () => store
  22.   dispatch = store.dispatch
  23.   app.dispatch = dispatch
  24.   return app
  25. }
  27. export default {
  28.   createApp,
  29.   getDispatch() {
  30.     return app.dispatch
  31.   }
  32. }

往[ src/store/index.ts ] 添加内容

引入src/store/dva.ts的文件

  1. import dva from './dva';
  3. const dvaApp = dva.createApp();
  4. const store = dvaApp.getStore();
  6. export default store;

2、创建models文件夹管理数据

目标=> src/models/index.ts

image.png

  1. ├─models    // 增加目录models
  2. |   ├─app.ts            // 使用app为例
  3. |   ├─connect.d.ts // 存放公共数据的类型
  4. |   ├─index.ts        // 作为统一出口

往TS类型文件 [ src/models/connect.d.ts ] 添加内容

  1. import { AnyAction } from 'redux';
  2. import { EffectsCommandMap } from 'dva';
  4. // import { UserModelState } from './user'; 其他model的文件可以导入这里，统一导出
  5. // export { UserModelState };
  7. export interface Loading {
  8.   global: boolean;
  9.   effects: { [key: string]: boolean | undefined };
  10.   models: {
  11.     global?: boolean;
  12.     menu?: boolean;
  13.     setting?: boolean;
  14.     user?: boolean;
  15.   };
  16. }
  18. export interface ConnectState {
  19.   loading: Loading;
  20.   // user: UserModelState;
  21. }
  23. export type Effect = (
  24.   action: AnyAction,
  25.   effects: EffectsCommandMap & { select: <T>(func: (state: ConnectState) => T) => T },
  26. ) => void;
  28. /**
  29.  * @type P: Type of payload
  30.  * @type C: Type of callback
  31.  */
  32. export type Dispatch = <P = any, C = (payload: P) => void>(action: {
  33.   type: string;
  34.   payload?: P;
  35.   callback?: C;
  36.   [key: string]: any;
  37. }) => any;
  40. // export interface ConnectProps<T = {}> extends Partial<RouterTypes<Route, T>> {
  41. export interface ConnectProps {
  42.   dispatch: Dispatch;
  43. }

往文件 [ src/models/app.ts ] 添加内容

  1. import { Effect } from "dva";
  2. import { Reducer } from "redux";
  4. export interface AppModelState {
  5.     name: string        // 定义state的变量
  6. }
  8. export interface AppModelType {
  9.     namespace: "app";                    // 这个名字调用这里的方法的时候需要使用
  10.     /**
  11.     * 例如：在页面中调用
  12.     * useDispatch({
  13.     *   type: "app/fetchApp"
  14.     * })
  15.     */
  16.     state: AppModelState;
  17.     effects: {
  18.         fetchApp: Effect;
  19.     };
  20.     reducers: {
  21.         saveApp: Reducer<AppModelState>;
  22.     };
  23. }
  25. const initState: AppModelState = {
  26.     name: 'nangdie'    // 需要管理的公共值
  27.     // ...
  28. };
  30. const AppModel: AppModelType = {
  31.     namespace: "app",
  32.     state: initState,
  33.     effects: {
  34.         *fetchApp(_, { call, put }) {    // 可以异步执行
  35.             const result = yield call(/* 放入请求函数，Promise函数 */);
  36.             yield put({
  37.                 type: "saveApp",    // 将返回的调用saveApp进行保存
  38.                 payload: result
  39.             });
  40.         }
  41.     },
  42.     reducers: {
  43.         saveApp(state = initState, action) { return { ...state, ...action } }  // 保存到state上。
  44.     }
  45. };
  47. export default AppModel;

往文件 [ src/models/index.ts ] 添加内容

  1. import app from "./app";
  2. // import user from "./user";
  3. // ...
  4. export default [app , /*user*/];    //导出一个数组，里面包含多个模块

3、对所有文件进行关联

将store文件和models文件进行关联

修改 [ src/store/index.ts ] 的内容，导入models

  1. import dva from './dva';
  2. import models from '../models/index'; // 引入models
  4. const dvaApp = dva.createApp({
  5.     initialState: {},
  6.     models            // 加入models , 这是一个数组，可包含多个模块
  7. });
  9. const store = dvaApp.getStore();
  11. export default store;

将 [ src/store/index.ts ]加入到 [ src/app.tsx ]中使用（正式启用）

  • 注意：如果不是app.tsx 需要你把 app.ts 的文件名改成 app.tsx ，然后重新编译即可。 ```typescript import React, { Component } from “react”; import { Provider } from “react-redux”; //新增 import store from “./store/index”; // 新增 import “./app.scss”;

class App extends Component { componentDidMount() { } // render() { return this.props.children } render() { return {this.props.children}; // 新的返回值 } }

export default App;

  1. <a name="OebHt"></a>
  2. ### 4、接下来你可以在组件和页面之间使用了
  3. > 这里可能有人问，为什么不用connect ？  因为connect在Taro有兼容问题，可能导致数据没法更新
  5. <a name="C4TOW"></a>
  6. #### 获取redux中的数据
  7. ```typescript
  8. import { useSelector } from "react-redux";
  10. const appName = useSelector(state => state.app.name);

改变redux中的数据

  1. import { useDispatch } from "react-redux";
  2. const dispatch = useDispatch()
  3. // 调用effects的函数
  4. dispatch({
  5.     type: "app/fetchApp",
  6.     payload: '新的参数1'
  7. })
  8. // 调用reducers的函数
  9. dispatch({
  10.     type: "app/saveApp",
  11.     payload: '新的参数2'
  12. })

5、例子：使用redux实现计数

在 [ src/models/app.ts ] 中添加count

  1. import { Effect } from "dva";
  2. import { Reducer } from "redux";
  4. export interface AppModelState {
  5.     name: string
  6.     count: number //新增
  7. }
  9. export interface AppModelType {
  10.     namespace: "app";
  11.     state: AppModelState;
  12.     effects: {
  13.         fetchApp: Effect;
  14.     };
  15.     reducers: {
  16.         saveApp: Reducer<AppModelState>;
  17.         saveCount: Reducer<AppModelState>;
  18.     };
  19. }
  21. const initState: AppModelState = {
  22.     name: 'nangdie',
  23.     count: 0 //新增
  24. };
  26. const AppModel: AppModelType = {
  27.     namespace: "app",
  28.     state: initState,
  29.     effects: {
  30.         *fetchApp(_, { call, put }) {
  31.             const result = yield call(/* 放入请求函数，Promise函数 */);
  32.             yield put({
  33.                 type: "saveApp",
  34.                 payload: result
  35.             });
  36.         },
  37.     },
  38.     reducers: {
  39.         saveApp(state = initState, action) { return { ...state, ...action.payload } },
  40.         saveCount(state = initState, action) {  // 新增方法，将接受到的数字进行保存
  41.             console.log(action,'.action')
  42.             return {
  43.                 ...state,
  44.                 count: action.payload
  45.             }
  46.         }
  47.     }
  48. };
  50. export default AppModel;

修改 [ src/pages/index/index.tsx ]

将该文件下的默认数据清空，修改成Hooks的方式

  1. import React, { Component, useState } from 'react'
  2. import { View, Text } from '@tarojs/components'
  3. import { useSelector, useDispatch } from "react-redux"; //引入
  4. import { AtButton } from 'taro-ui'
  6. const Index = () => {
  7.   const count = useSelector(state => state.app.count);  // 获取到count
  8.   const dispatch = useDispatch()
  9.   const addCount = () => {
  10.     dispatch({            // 调用方法
  11.       type: 'app/saveCount',
  12.       payload: count + 1
  13.     })
  14.   }
  16.   return <View>
  17.     <View>当前数字： {count}</View>
  18.     <AtButton type="primary" onClick={addCount}> 加1</AtButton>
  19.   </View>
  20. }
  22. export default Index

模拟异步请求数据

只要写在effects里即可
  1. import { showToast, hideLoading } from "@tarojs/taro"; //显示状态
  2. *fetchCount(_, { call, put }) {
  3.                       // 模拟请求 , 假装我在等待服务器返回结果
  4.             const getCount = () => new Promise((resolve) => { 
  5.                 showToast({
  6.                     title: "请求中...",
  7.                     mask: true,
  8.                     icon: "loading"
  9.                 });
  10.                 setTimeout(() => {
  11.                     resolve(new Date().getTime())
  12.                     hideLoading();
  13.                 }, 3000);
  14.             })
  16.             const result = yield call(getCount)
  17.             yield put({         // 调用保存
  18.                 type: "saveCount",
  19.                 payload: result
  20.             })
  21.  }

在 [ src/models/app.ts ] 中添加一个方法，完整的代码

  1. import { Effect } from "dva";
  2. import { Reducer } from "redux";
  3. import { showToast, hideLoading } from "@tarojs/taro";
  5. export interface AppModelState {
  6.     name: string        // 定义state的变量
  7.     count: number
  8. }
  10. export interface AppModelType {
  11.     namespace: "app";                    // 这个名字调用这里的方法的时候需要使用
  12.     /**
  13.     * 例如：在页面中调用
  14.     * useDispatch({
  15.     *   type: "app/fetchApp"
  16.     * })
  17.     */
  18.     state: AppModelState;
  19.     effects: {
  20.         fetchApp: Effect;
  21.         fetchCount: Effect;
  22.     };
  23.     reducers: {
  24.         saveApp: Reducer<AppModelState>;
  25.         saveCount: Reducer<AppModelState>;
  26.     };
  27. }
  29. const initState: AppModelState = {
  30.     name: 'nangdie',
  31.     count: 0
  32. };
  34. const AppModel: AppModelType = {
  35.     namespace: "app",
  36.     state: initState,
  37.     effects: {
  38.         *fetchApp(_, { call, put }) {
  39.             const result = yield call(/* 放入请求函数，Promise函数 */);
  40.             yield put({
  41.                 type: "saveApp",
  42.                 payload: result
  43.             });
  44.         },
  45.         *fetchCount(_, { call, put }) {
  46.             const getCount = () => new Promise((resolve) => { //模拟请求 , 假装我在等待服务器返回结果
  47.                 showToast({
  48.                     title: "请求中...",
  49.                     mask: true,
  50.                     icon: "loading"
  51.                 });
  52.                 setTimeout(() => {
  53.                     resolve(new Date().getTime())
  54.                     hideLoading();
  55.                 }, 3000);
  56.             })
  58.             const result = yield call(getCount)
  59.             yield put({         // 调用保存
  60.                 type: "saveCount",
  61.                 payload: result
  62.             })
  63.         }
  64.     },
  65.     reducers: {
  66.         saveApp(state = initState, action) { return { ...state, ...action.payload } },
  67.         saveCount(state = initState, action) {
  68.             console.log(action, '.action')
  69.             return {
  70.                 ...state,
  71.                 count: action.payload
  72.             }
  73.         }
  74.     }
  75. };
  77. export default AppModel;

在 [ src/pages/index/index.tsx ] 中使用

  1. import React, { Component, useState } from 'react'
  2. import { View, Text } from '@tarojs/components'
  3. import { useSelector, useDispatch } from "react-redux";
  4. import { AtButton } from 'taro-ui'
  6. const Index = () => {
  7.   const count = useSelector(state => state.app.count);
  8.   const dispatch = useDispatch()
  9.   const addCount = () => {
  10.     dispatch({
  11.       type: 'app/saveCount',
  12.       payload: count + 1
  13.     })
  14.   }
  16.   const requestCount = () => {
  17.     dispatch({ type: 'app/fetchCount' })
  18.   }
  20.   return <View>
  21.     <View>当前数字： {count}</View>
  22.     <AtButton type="primary" onClick={addCount}> 加1</AtButton>
  23.     <AtButton onClick={requestCount}> 模拟请求</AtButton>
  24.   </View>
  25. }
  27. export default Index

最终效果如下

count2.gif