React Native 使用 Redux

React Native
学习笔记, React, Redux

为什么用

因为更好的易用性和可维护性，将页面拆分了不同的大大小小组件，同一个页面的各个组件怎么能用同一套数据，一层一层传递显然不靠谱，如果能放到一个地方谁都能取出来用，那该多好，就用了Redux

正常用

Store: 数据集合，一个应用只有一个
Action: 必须定义一个类型，可以传递数据给state，例子：从Native端拿到的数据怎么放到Store里面
Reducer: 纯函数，两个参数：1. state; 2. action

合并多个reducer
combineReducer

异步

正常dispatch一个Action，在这个Action里面去发异步操作，操作前dispatch一个Action，异步操作之后dispatch一个Action

ActionCreator应该返回一个函数，这个函数有两个参数，一个是dispatch，一个是getState；然后开始的时候dispatch一个Action，接着执行异步操作，操作之后再dispatch一个Action;
redux-thunk: 能让store.dispatch参数是函数
redux-promise: AcrionCreator返回一个Primise对象。
两个用法：

  1. ActionCreator返回值是一个Promise对象
  2. Action的payload对象是一个Promise对象，需要redux-actions里面的createAction方法，该方法接受两个参数：1. type; 2. promise对象。如果Action是一个Promise对象，它resolve以后的值也是一个Action对象。而如果Action.payload是一个Promise对象，它resolve和reject之后都可以出发Action。

React-Reduex

  • UI组件和容器组件
    UI组件只负责展示，是一个纯组件，只受props影响，可以接受用户操作，发出Action；容器组件处理逻辑，比如将state里面的值转化成UI组件可用的propos属性，包含着UI组件。
  • connect方法
    connect用于从UI组件生成容器组件
  • mapStateToProps
  • mapDispatchToProps
  • <Provider />组件：能让每个组件都能拿到state，从this.context里面拿
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// connect
import { connect } from 'react-redux'; 
// UI组件
import List from './List';

const mapStateToProps = () => {
    // 将state的值传给props，返回一个对象，key是props的key，value就是props的value
    // 自动订阅Store，当state更新，会自动更新UI
}

// 如果是一个函数
const mapDispatchToProps = (dispatch, ownProps) => {
    // 定义用户应该怎么操作触发Action
    // dispatch触发Action
}

// 如果是一个对象
const mapDispatchToProps =  {
    // key是UI组件对应的同名参数
    // value 是一个ActionCreator，满足条件自动发
}


export default connect(
    mapStateToProps,
    mapDispatchToProps
)(List);

// connect()(List);这个List就是将List这个UI组件包裹进去。