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