connect简介
react-redux仅有2个API，Provider和connect，Provider提供的是一个顶层容器的作用，实现store的上下文传递。
原理解析
首先connect之所以会成功，是因为Provider组件：
在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
接收Redux的store作为props，通过context对象传递给子孙组件上的connect
那connect做了些什么呢？
它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件。
connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {})
connect作用：连接React组件与 Redux store。
connect真正连接的是容器型组件，容器型组件主要关注业务逻辑的处理，比如从服务器拉取数据，进行数据校验等，容器组件处理好的数据再通过props传递给需要使用的展示型组件，展示型组件是关注界面渲染的组件。
一个应用（或页面）中可以有多个容器型组件，这取决于你的业务逻辑复杂程度，一般最外层的组件是会做为一个容器组件进行connect（但这不是必须），当你层级较低的组件中有较多业务逻辑需要处理时，往往也会在它的上一层封装一个容器组件专门处理这些逻辑，这时这个组件也是会被connect的。
使用 connect() 前，需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中。例如，VisibleTodoList 需要计算传到 TodoList 中的 todos，所以定义了根据 state.visibilityFilter 来过滤 state.todos 的方法，并在 mapStateToProps 中使用。
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
case 'SHOW_ALL':
default:
return todos
}
}
const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
除了读取 state，容器组件还能分发 action。类似的方式，可以定义 mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法。例如，我们希望 VisibleTodoList向 TodoList 组件中注入一个叫 onTodoClick 的 props ，还希望 onTodoClick 能分发 TOGGLE_TODO 这个 action：
const mapDispatchToProps = dispatch => {
return {
onTodoClick: id => {
dispatch(toggleTodo(id))
}
}
}
最后，使用 connect() 创建 VisibleTodoList，并传入这两个函数。
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
connect和@connect的区别
The @ symbol is in fact a JavaScript expression currently proposed to signify decorators:
Decorators make it possible to annotate and modify classes and properties at design time.
Here's an example of setting up Redux without and with a decorator:
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
}
From What's the '@' (at symbol) in the Redux @connect decorator?
为什么我们需要react-redux？
熟悉redux的人可能知道，redux是数据存储和管理的工具，但是想要在react中使用redux，并不能直接将store、action和react组件建立连接，所以就需要react-redux来结合react和redux。
Redux 的工作流程，Reducer 的拆分
从何处开始解析react-redux源码？
1、在JavaScript中，读懂别人的代码文件，你首先应该看的是函数的入口。
2、找到函数入口，然后看有哪些参数。
3、看看导入了哪些额外的插件，每个插件的作用大概预测一下。
4、进入函数体进行解读。
如何发送网络请求
当我们需要从服务器获取数据时，我们应该在组件的哪一个生命周期方法中发送网络请求呢？React官网上提到，可以在componentDidMount中发送网络请求，这也是一般情况下的最佳实践。有些人也会把发送网络请求放在componentWillMount中，并且认为这个方法先于componentDidMount调用，所以可以更快地获取数据。个人认为，这种使用方法一般也是没有问题的，但在一些场景下会出现问题，比如需要在服务器端渲染时，componentWillMount会被调用两次，一次是在Server端，一次是在Client端。可参考这篇文章。
详见
网友评论