使用Redux

在 Taro 中可以自由地使用 React 生态中非常流行的数据流管理工具 Redux 来解决复杂项目的数据管理问题。而为了更方便地使用 Redux ，Taro 提供了与 react-redux API 几乎一致的包 @tarojs/redux 来让开发人员获得更加良好的开发体验。

下文中示例代码均在 taro-redux-sample

首先请安装 redux 、 @tarojs/redux 和 @tarojs/redux-h5，以及一些需要用到的 redux 中间件

  1. $ yarn add redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger
  2. # 或者使用 npm
  3. $ npm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger

随后可以在项目 src 目录下新增一个 store 目录，在目录下增加 index.js 文件用来配置 store，按自己喜好设置 redux 的中间件，例如下面例子中使用 redux-thunk 和 redux-logger 这两个中间件

  1. // src/store/index.js
  2. import { createStore, applyMiddleware } from 'redux'
  3. import thunkMiddleware from 'redux-thunk'
  4. import { createLogger } from 'redux-logger'
  5. import rootReducer from '../reducers'
  7. const middlewares = [
  8.   thunkMiddleware,
  9.   createLogger()
  10. ]
  12. export default function configStore () {
  13.   const store = createStore(rootReducer, applyMiddleware(...middlewares))
  14.   return store
  15. }

接下来在项目入口文件 app.js 中使用 @tarojs/redux 中提供的 Provider 组件将前面写好的 store 接入应用中

  1. // src/app.js
  2. import Taro, { Component } from '@tarojs/taro'
  3. import { Provider } from '@tarojs/redux'
  5. import configStore from './store'
  6. import Index from './pages/index'
  8. import './app.scss'
  10. const store = configStore()
  12. class App extends Component {
  13.   config = {
  14.     pages: [
  15.       'pages/index/index'
  16.     ],
  17.     window: {
  18.       navigationBarTitleText: 'Test'
  19.     }
  20.   }
  22.   render() {
  23.     return (
  24.       <Provider store={store}>
  25.         <Index />
  26.       </Provider>
  27.     )
  28.   }
  29. }
  31. Taro.render(<App />, document.getElementById('app'))

然后就可以开始使用了。如 redux 推荐的那样，可以增加

  • constants 目录，用来放置所有的 action type 常量
  • actions 目录，用来放置所有的 actions
  • reducers 目录，用来放置所有的 reducers

例如我们要开发一个简单的加、减计数器功能

新增 action type

  1. // src/constants/counter.js
  2. export const ADD = 'ADD'
  3. export const MINUS = 'MINUS'

新增 reducer 处理

  1. // src/reducers/counter.js
  2. import { ADD, MINUS } from '../constants/counter'
  4. const INITIAL_STATE = {
  5.   num: 0
  6. }
  8. export default function counter (state = INITIAL_STATE, action) {
  9.   switch (action.type) {
  10.     case ADD:
  11.       return {
  12.         ...state,
  13.         num: state.num + 1
  14.       }
  15.      case MINUS:
  16.        return {
  17.          ...state,
  18.          num: state.num - 1
  19.        }
  20.      default:
  21.        return state
  22.   }
  23. }
  1. // src/reducers/index.js
  2. import { combineReducers } from 'redux'
  3. import counter from './counter'
  5. export default combineReducers({
  6.   counter
  7. })

新增 action 处理

  1. // src/actions/counter.js
  2. import {
  3.   ADD,
  4.   MINUS
  5. } from '../constants/counter'
  7. export const add = () => {
  8.   return {
  9.     type: ADD
  10.   }
  11. }
  12. export const minus = () => {
  13.   return {
  14.     type: MINUS
  15.   }
  16. }
  18. // 异步的action
  19. export function asyncAdd () {
  20.   return dispatch => {
  21.     setTimeout(() => {
  22.       dispatch(add())
  23.     }, 2000)
  24.   }
  25. }

最后，我们可以在页面（或者组件）中进行使用，我们将通过 tarojs/redux 提供的 connect 方法将 redux 与我们的页面进行连接

  1. // src/pages/index/index.js
  2. import Taro, { Component } from '@tarojs/taro'
  3. import { View, Text } from '@tarojs/components'
  4. import { connect } from '@tarojs/redux'
  5. import './index.scss'
  7. import { add, minus, asyncAdd } from '../../actions/counter'
  9. @connect(({ counter }) => ({
  10.   counter
  11. }), (dispatch) => ({
  12.   add () {
  13.     dispatch(add())
  14.   },
  15.   dec () {
  16.     dispatch(minus())
  17.   },
  18.   asyncAdd () {
  19.     dispatch(asyncAdd())
  20.   }
  21. }))
  22. export default class Index extends Component {
  23.   config = {
  24.     navigationBarTitleText: '首页'
  25.   }
  27.   render () {
  28.     return (
  29.       <View className='todo'>
  30.         <Button className='add_btn' onClick={this.props.add}>+</Button>
  31.         <Button className='dec_btn' onClick={this.props.dec}>-</Button>
  32.         <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
  33.         <View>{this.props.counter.num}</View>
  34.       </View>
  35.     )
  36.   }
  37. }

connect 方法接受两个参数 mapStateToProps 与 mapDispatchToProps

  • mapStateToProps，函数类型，接受最新的 state 作为参数，用于将 state 映射到组件的 props
  • mapDispatchToProps，函数类型，接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法