React Native之Redux相关

1.Redux异步选型问题

http://www.zoues.com/2016/10/27/redux%E5%BC%82%E6%AD%A5%E6%96%B9%E6%A1%88%E9%80%89%E5%9E%8B/

2.actions的拆分

小型的项目还好，actions可以全部放在一个文件中，但是随着项目的增大，最好还是拆分actions



其中index.js的代码如下：

'use strict';

import parseActions from './parse';
import navigationActions from './navigation';
import loginActions from './login';
import scheduleActions from './schedule';
import filterActions from './filter';
import notificationActions from './notifications';
import configActions from './config';
import surveyActions from './surveys';
import testActions from './test';
import installationActions from './installation';

module.exports = {
...loginActions,
...scheduleActions,
...filterActions,
...notificationActions,
...configActions,
...surveyActions,
...testActions,
...parseActions,
...navigationActions,
...installationActions,
};

用如下方式使用:

import {
loadConfig,
loadMaps,
loadNotifications,
loadSessions,
loadFriendsSchedules,
loadSurveys,
} from './actions';
//loadConfig这些是具体的actionCreater方法，但是分散在不同的actions中

3.最好为单个功能设置单独的属性

场景：从A->B，A B页面均有对同一action的调用，并绑定了同一个reducer中的state属性，此时在B中调用action，A中依旧会触发

4.怎么获取连接到redux的组件实例

使用connect过的组件，如果直接使用，this.ref获取到的并不是实际组件的实例，而是包装过的redux实例，如果需要获取真实的实例，需要如下设置:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

[options] (Object) If specified, further customizes the behavior of the connector. In addition to the options passable to connectAdvanced() (see those below), connect() accepts these additional options:

[pure] (Boolean): If true, connect() will avoid re-renders and calls to mapStateToProps, mapDispatchToProps, and mergeProps if the relevant state/props objects remain equal based on their respective equality checks. Assumes that the wrapped component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Default value: true
[areStatesEqual] (Function): When pure, compares incoming store state to its previous value. Default value: strictEqual (===)
[areOwnPropsEqual] (Function): When pure, compares incoming props to its previous value. Default value: shallowEqual
[areStatePropsEqual] (Function): When pure, compares the result of mapStateToProps to its previous value. Default value: shallowEqual
[areMergedPropsEqual] (Function): When pure, compares the result of mergeProps to its previous value. Default value: shallowEqual

5.connect的两种使用方式

es7的@语法可以简化代码，具体：

https://github.com/wycats/javascript-decorators

Without a decorator

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(actionCreators, dispatch) };
}

class MyApp extends React.Component {
// ...define your main app here
}

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

Using a decorator

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(actionCreators, dispatch) };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
// ...define your main app here
}

http://www.cnblogs.com/whitewolf/p/details-of-ES7-JavaScript-Decorators.html