「推荐」React 通信之 Redux，看这一篇就能掌握

import React, { Component } from "react";import PropTypes from "prop-types";import ReactDOM from "react-dom";import { createStore } from "redux";import { Provider, connect } from "react-redux";// 生成组件class Counter extends Component { render() { const { value, onIncreaseClick } = this.props; return ( <div> <span>{value}</span> <button onClick={onIncreaseClick}>Increase</button> </div> ); }}Counter.propTypes = { value: PropTypes.number.isRequired, onIncreaseClick: PropTypes.func.isRequired};// 定义actionconst increaseAction = { type: "increase" };/** * Reducer函数 * @param {*} state 默认值 * @param {*} action 根据action来计算state. */function counter(state = { count: 0 }, action) { const count = state.count; switch (action.type) { case "increase": return { count: count + 1 }; default: return state; }}/** * 创建store -> 需要reducer -> 默认值+action */const store = createStore(counter);/** * 建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。 * @param {*} state */function mapStateToProps(state) { return { value: state.count };}/** * 建立 UI 组件的参数到store.dispatch方法的映射 * 定义了哪些用户的操作应该当作 Action，传给 Store。 * 它可以是一个函数，也可以是一个对象。 * * 1. 函数： * - 参数： * 可以拿到dispatch和ownProps（容器组件的props对象）两个参数； * - 返回值 * 一个对象，每个键值对都是一个映射，[键名对应函数名] * 定义了 UI 组件的参数怎样发出 Action。 * 2. 对象 * 它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数， * 会被当作 Action creator ，返回的 Action 会由 Redux 自动发出。 * @param {*} dispatch */function mapDispatchToProps(dispatch) { return { // 同名函数 onIncreaseClick， dispatch 一个action onIncreaseClick: () => dispatch(increaseAction) };}/** * connect 自动生成容器组件，将UI组件[Counter]与[容器组件]即关联起来。 * Counter: UI 组件 * mapStateToProps：输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的参数 * mapDispatchToProps：用户发出的动作如何变为 Action 对象，从 UI 组件传出去。 */const App = connect( mapStateToProps, mapDispatchToProps)(Counter);// React-Redux 提供Provider组件，可以让容器组件拿到state。// Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了// 原理：React中的context属性，ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById("root"));

class Provider extends React.Component { getChildContext() { return { store: this.props.store } } render() { return this.props.children }}// usageconst store = createStore();ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.querySelector('#root'));