react-redux入门

概念

React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。

Provider

React-redux提供了Provider组件，能够使整个app访问到store中的数据。

一般在最顶层组件被渲染之前使用，例如：

// index.js
import TodoList from './TodoList';
import ReactDom from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/index';
// 使用Provider组件将原先的顶层组件包裹起来
const app = (
    <Provider store={store}>
        <TodoList/>
    </Provider>
)

ReactDOM.render(App, document.getElementById('root'));

向Provider组件提供一个store prop，即从哪个store向整个app提供数据。

connect

React-Redux提供一个connect方法能够让你把组件和store连接起来。

connect方法接受两个参数：

• mapStateToProps
• mapDispatchToProps

mapStateToProps

作为传递给connect方法的第一个参数，mapStateToProps用来从store中选择被连接的组件所需要的部分数据。

该方法每当store state改变时就被调用。

mapStateToProps应该声明为一个函数，它接受两个参数：state和ownProps。其中第一个参数是一个完整的==store state==。

该方法应最终返回一个组件所需要的数据对象。

作为第一个传递给connect方法的参数，它会在每次Redux store state改变时被调用。如果你不希望订阅store，那么请传递null或者undefined替代mapStateToProps作为connect的第一个参数。

参数

state

mapStateToProps的第一个参数是整个Redux store state对象（与store.getState()方法返回的值相同）。因此第一个参数通常命名为state。

mapStateToProps方法至少要传递state参数。

ownProps

如果你的组件需要用自身的props数据以从store中检索出数据，你可以传入第二个参数，ownProps。这个参数将包含所有传递给由connect生成的包装组件的props。

// Todo.js

function mapStateToProps(state, ownProps) {
  const { visibilityFilter } = state;
  const { id } = ownProps;
  const todo = getTodoById(state, id);

  // 组件额外接收:
  return { todo, visibilityFilter };
};

// 之后，在你的应用里，渲染一个如下父组件：
<ConnectedTodo id={123} />
// 你的组件接收 props.id, props.todo, 以及 props.visibilityFilter

不需要把ownProps中的值再添加入mapStateToProps返回的对象中，connect会自动的把这些不同源的prop合并为一个最终的prop集。

返回值

方法应该返回一个包含了组件用到的数据的纯对象：

• 每一个对象中的字段都将作为你组件的一个prop
• 字段中的值用来判断你的组件是否需要重新渲染

注：在一些高级场景中，你可能需要更多地对于渲染性能的控制，mapStateToProps也可以返回一个方法。在这种情况下，那个所返回的方法会做为一个特定组件实例的最终的mapStateToProps。这样一来，你就可以对每个实例进行memoization。

mapDispatchToProps

作为第二个传入connect的参数，mapDispatchToProps可以实现向store中分发acions。

使用React-Redux后，组件就不再需要直接和store打交道了——connect会为你完成这件任务，React-Redux提供了两种可以分发actions的方式：

• 默认地，一个已连接组件可以接收props.dispatch然后自己分发actions
• connect能够接收一个mapDispatchToProps作为第二个参数，这将让你能够创建dispatch调用方法，然后把这些方法作为props传递给你的组件。

如果不为connect()指明第二个参数，你的组件会默认接收dispatch。比如：

connect()(MyComponent);
// 与下面语句等价
connect(
  null,
  null
)(MyComponent);

// 或者
connect(mapStateToProps /** 没有第二个参数 */)(MyComponent);

一旦以这种方式连接了组件，组件就会接收props.dispatch。可以用它来向store中分发actions。

---

而提供一个mapDispatchToProps参数能够让你指明你的组件所实际需要分发的那些action
s。它允许你提供action分发函数作为props，这样一来，你不用再进行props.dispatch(() => increment())调用，你可以直接props.increment()