title: Use Redux

You can freedomly use Redux which is a very popular tool in React community to solve data management problems for complex projects.

First please install redux 、 react-redux 、 redux-thunk and redux-logger and so on ,such as redux middleware which you need.

  1. $ yarn add redux react-redux redux-thunk redux-logger
  2. # or use npm
  3. $ npm install --save redux react-redux redux-thunk redux-logger

Then you can create a new directory named store under the project src directory, and add an index.js file under the directory to configure the store, set up the middleware of redux according to your preferences. As in the following example, using in the following example redux-thunk and redux-logger these two middleware.

```jsx title=”src/store/index.js” import { createStore, applyMiddleware, compose } from ‘redux’ import thunkMiddleware from ‘redux-thunk’ import rootReducer from ‘../reducers’

const composeEnhancers = typeof window === ‘object’ && window.REDUX_DEVTOOLS_EXTENSION_COMPOSE ?
window.REDUX_DEVTOOLS_EXTENSION_COMPOSE({ // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize… }) : compose

const middlewares = [ thunkMiddleware ]

if (process.env.NODE_ENV === ‘development’ && process.env.TARO_ENV !== ‘quickapp’) { middlewares.push(require(‘redux-logger’).createLogger()) }

const enhancer = composeEnhancers( applyMiddleware(…middlewares), // other store enhancers if any )

export default function configStore () { const store = createStore(rootReducer, enhancer) return store }

  1. Next, use the `Provider` component provided in `redux` to connect the previously written `store` to the application, in the project entry file `app.js`.
  3. ```jsx title="src/app.js"
  4. import React, { Component } from 'react'
  5. import { Provider } from 'react-redux'
  7. import configStore from './store'
  9. import './app.css'
  11. const store = configStore()
  13. class App extends Component {
  14.   componentDidMount () {}
  16.   componentDidShow () {}
  18.   componentDidHide () {}
  20.   componentDidCatchError () {}
  22.   // The render() function has no practical effect in the App class.
  23.   // Please don't modify the function!
  24.   render () {
  25.     return (
  26.       <Provider store={store}>
  27.         {this.props.children}
  28.       </Provider>
  29.     )
  30.   }
  31. }
  33. export default App

Then you can start use it. As recommended by redux, you can add

-constants directory, used to store all action type constants -actions directory, used to store all actions -reducers directory, used to store all reducers

For example, If we want to develop a simple counter function just contains add and subtract.

Add action type

```jsx title=”src/constants/counter.js” export const ADD = ‘ADD’ export const MINUS = ‘MINUS’

  2. Add `reducer` function
  4. ```jsx title="src/reducers/counter.js"
  5. import { ADD, MINUS } from '../constants/counter'
  7. const INITIAL_STATE = {
  8.   num: 0
  9. }
  11. export default function counter (state = INITIAL_STATE, action) {
  12.   switch (action.type) {
  13.     case ADD:
  14.       return {
  15.         ...state,
  16.         num: state.num + 1
  17.       }
  18.     case MINUS:
  19.       return {
  20.         ...state,
  21.         num: state.num - 1
  22.       }
  23.     default:
  24.       return state
  25.   }
  26. }

```jsx title=”src/reducers/index.js” import { combineReducers } from ‘redux’ import counter from ‘./counter’

export default combineReducers({ counter })

  2. Add `action` 
  4. ```jsx title="src/actions/counter.js"
  5. import {
  6.   ADD,
  7.   MINUS
  8. } from '../constants/counter'
  10. export const add = () => {
  11.   return {
  12.     type: ADD
  13.   }
  14. }
  15. export const minus = () => {
  16.   return {
  17.     type: MINUS
  18.   }
  19. }
  21. // Asynchronous action
  22. export function asyncAdd () {
  23.   return dispatch => {
  24.     setTimeout(() => {
  25.       dispatch(add())
  26.     }, 2000)
  27.   }
  28. }

Finally, we can use it in the page (or component).The connect method provided by redux will commect redux with our page.

```jsx title=”src/pages/index/index.js” import React, { Component } from ‘react’ import { connect } from ‘react-redux’ import { View, Button, Text } from ‘@tarojs/components’

import { add, minus, asyncAdd } from ‘../../actions/counter’

import ‘./index.css’

@connect(({ counter }) => ({ counter }), (dispatch) => ({ add () { dispatch(add()) }, dec () { dispatch(minus()) }, asyncAdd () { dispatch(asyncAdd()) } })) class Index extends Component { componentWillReceiveProps (nextProps) { console.log(this.props, nextProps) }

componentWillUnmount () { }

componentDidShow () { }

componentDidHide () { }

render () { return ( {this.props.counter.num} Hello, World ) } }

export default Index

  1. `connect` method will receive two parameters: `mapStateToProps` and `mapDispatchToProps`.
  4. - `mapStateToProps`, function type, accepts the latest `state` as a parameter, which is used to map `state` to component `props`.
  5. - `mapDispatchToProps`, function type, receive the `dispatch()` method and return the callback function expected to be injected into the `props` of the display component. 
  7. ## Hooks
  9. ### Use Hooks in Redux
  11. The basic setting of using hooks is the same as `connect`. You need to set up your `store` and put your application in the `Provider` component.
  12. 使用 hooks 的基本设置和使用 `connect` 的设置是一样的, 你需要设置你的 `store`, 并把你的应用放在 `Provider` 组件中。
  14. ```jsx
  15. const store = configreStore(rootReducer)
  17. class App extends Components {
  18.     render () {
  19.         return (
  20.             <Provider store={store}>
  21.                 <Index />
  22.             </Provider>
  23.         )
  24.     }
  25. }

In this case, you can use Hooks API provided by redux in function component.

useSelector

  1. const result : any = useSelector(selector : Function, equalityFn? : Function)

useSelector allows you to use selector function to get data from a Redux Store.

The Selector funtion is roughly equivalent to the mapStateToProps parameter of the connect function. It will be called every time the component renders. And it will also subscribe to the Redux store, which will be called when a Redux action is dispatched.

But useSelector is still somewhat different from mapStateToProps:

  • Unlike mapStateToProps which only returns objects, the Selector may return any value.
  • When an action is dispatched, useSelector will make a shallow comparison of the return value before and after the selector. If they are different, the component will be forced to update.
  • The Selector function does not accept the ownProps parameter. But selector can access the props passed down by functional components through closures

Use Case

Basic usage:

  1. import React, { Component } from 'react'
  2. import { useSelector } from 'react-redux'
  4. export const CounterComponent = () => {
  5.   const counter = useSelector(state => state.counter)
  6.   return <View>{counter}</View>
  7. }

Use the closure to decide how to select data:

  1. export const TodoListItem = props => {
  2.   const todo = useSelector(state => state.todos[props.id])
  3.   return <View>{todo.text}</View>
  4. }

Advanced Usage

You could learn how to use reselect to cache selector from react-redux documentatio.

useDispatch

  1. const dispatch = useDispatch()

This Hook will return a reference to the dispatch of the Redux store. You can use it to dispatch actions.

Use Case

  1. import React, { Component } from 'react'
  2. import { useDispatch } from 'react-redux'
  4. export const CounterComponent = ({ value }) => {
  5.   const dispatch = useDispatch()
  7.   return (
  8.     <View>
  9.       <Text>{value}</Text>
  10.       <Button onClick={() => dispatch({ type: 'increment-counter' })}>
  11.         Increment counter
  12.       </Button>
  13.     </View>
  14.   )
  15. }

It’s recommend to use useCallback to cache the callback, when we use dispatch to pass a callback to child component. Because the component may be re-redered due to changes in references.

  1. // CounterComponent.js
  2. export const CounterComponent = ({ value }) => {
  3.   const dispatch = useDispatch()
  4.   const incrementCounter = useCallback(
  5.     () => dispatch({ type: 'increment-counter' }),
  6.     [dispatch]
  7.   )
  9.   return (
  10.     <View>
  11.       <Text>{value}</Text>
  12.       <MyIncrementButton onIncrement={incrementCounter} />
  13.     </View>
  14.   )
  15. }
  17. // IncrementButton.js
  18. const MyIncrementButton = ({ onIncrement }) => (
  19.   <Button onClick={onIncrement}>Increment counter</Button>
  20. )
  22. export default Taro.memo(MyIncrementButton)

useStore

  1. const store = useStore()

useStore returns a store reference, which is exactly the same as the Provider component reference.

This hook may not be used often, But useSelector is your first choice in most cases, If you need to replace reducers, you may use this API.

Use case

  1. import React, { Component } from 'react'
  2. import { useStore } from 'react-redux'
  4. export const CounterComponent = ({ value }) => {
  5.   const store = useStore()
  7.   // EXAMPLE ONLY! Do not do this in a real app.
  8.   // The component will not automatically update if the store state changes
  9.   return <div>{store.getState()}</div>
  10. }