1.用于action的分发——在createStore中可以用middleware中间件对dispatch进行改造，比如当action传入dispatch会立即触发reducer，有些时候我们不希望它立即触发，而是等待异步操作完成之后再触发，这时候用redux-thunk对dispatch进行改造，以前只能传入一个对象，改造完成后可以传入一个函数，在这个函数里我们手动dispatch一个action对象，这个过程是可控的，就实现了异步。
2、subscribe：
监听state的变化——这个函数在store调用dispatch时会注册一个listener监听state变化，当我们需要知道state是否变化时可以调用，它返回一个函数，调用这个返回的函数可以注销监听。
let unsubscribe = store.subscribe(() => {console.log('state发生了变化')})
3、getState：
获取store中的state——当我们用action触发reducer改变了state时，需要再拿到新的state里的数据，毕竟数据才是我们想要的。getState主要在两个地方需要用到，一是在dispatch拿到action后store需要用它来获取state里的数据，并把这个数据传给reducer，这个过程是自动执行的，二是在我们利用subscribe监听到state发生变化后调用它来获取新的state数据，如果做到这一步，说明我们已经成功了。
4、replaceReducer:
替换reducer，改变state修改的逻辑。
store可以通过createStore()方法创建，接受三个参数，经过combineReducers合并的reducer和state的初始状态以及改变dispatch的中间件，后两个参数并不是必须的。store的主要作用是将action和reducer联系起来并改变state。
action是一个对象，其中type属性是必须的，同时可以传入一些数据。action可以用actionCreactor进行创造。dispatch就是把action对象发送出去。
reducer是一个函数，它接受一个state和一个action，根据action的type返回一个新的state。根据业务逻辑可以分为很多个reducer，然后通过combineReducers将它们合并，state树中有很多对象，每个state对象对应一个reducer，state对象的名字可以在合并时定义。
像这个样子：
const reducer = combineReducers({
a: doSomethingWithA,
b: processB,
c: c
})ログイン後にコピー
combineReducers其实也是一个reducer，它接受整个state和一个action，然后将整个state拆分发送给对应的reducer进行处理，所有的reducer会收到相同的action，不过它们会根据action的type进行判断，有这个type就进行处理然后返回新的state，没有就返回默认值，然后这些分散的state又会整合在一起返回一个新的state树。
接下来分析一下整体的流程，首先调用store.dispatch将action作为参数传入，同时用getState获取当前的状态树state并注册subscribe的listener监听state变化，再调用combineReducers并将获取的state和action传入。combineReducers会将传入的state和action传给所有reducer，reducer会根据state的key值获取与自己对应的state，并根据action的type返回新的state，触发state树的更新，我们调用subscribe监听到state发生变化后用getState获取新的state数据。
redux的state和react的state两者完全没有关系，除了名字一样。
上面分析了redux的主要功能，那么react-redux到底做了什么？
react-redux
如果只使用redux，那么流程是这样的：
component --> dispatch(action) --> reducer --> subscribe --> getState --> component
用了react-redux之后流程是这样的：
component --> actionCreator(data) --> reducer --> component
store的三大功能：dispatch，subscribe，getState都不需要手动来写了。react-redux帮我们做了这些，同时它提供了两个好基友Provider和connect。
Provider是一个组件，它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过contex获取store。也就意味着我们可以在任何一个组件里利用dispatch(action)来触发reducer改变state，并用subscribe监听state的变化，然后用getState获取变化后的值。但是并不推荐这样做，它会让数据流变的混乱，过度的耦合也会影响组件的复用，维护起来也更麻烦。
connect --connect(mapStateToProps, mapDispatchToProps, mergeProps, options)是一个函数，它接受四个参数并且再返回一个函数--wrapWithConnect，wrapWithConnect接受一个组件作为参数wrapWithConnect(component)，它内部定义一个新组件Connect(容器组件)并将传入的组件(ui组件)作为Connect的子组件然后return出去。
所以它的完整写法是这样的：connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(component)
mapStateToProps(state, [ownProps])：
mapStateToProps 接受两个参数，store的state和自定义的props，并返回一个新的对象，这个对象会作为props的一部分传入ui组件。我们可以根据组件所需要的数据自定义返回一个对象。ownProps的变化也会触发mapStateToProps
function mapStateToProps(state) {
return { todos: state.todos };
}ログイン後にコピー
mapDispatchToProps(dispatch, [ownProps])：
mapDispatchToProps如果是对象，那么会和store绑定作为props的一部分传入ui组件。如果是个函数，它接受两个参数，bindActionCreators会将action和dispatch绑定并返回一个对象，这个对象会和ownProps一起作为props的一部分传入ui组件。所以不论mapDispatchToProps是对象还是函数，它最终都会返回一个对象，如果是函数，这个对象的key值是可以自定义的
function mapDispatchToProps(dispatch) {
return {
todoActions: bindActionCreators(todoActionCreators, dispatch),
counterActions: bindActionCreators(counterActionCreators, dispatch)
};
}ログイン後にコピー
mapDispatchToProps返回的对象其属性其实就是一个个actionCreator，因为已经和dispatch绑定，所以当调用actionCreator时会立即发送action，而不用手动dispatch。ownProps的变化也会触发mapDispatchToProps。
mergeProps(stateProps, dispatchProps, ownProps)：
mapStateToProps() と mapDispatchToProps() によって返されたオブジェクトとコンポーネント自体の props を新しい props にマージし、コンポーネントに渡します。デフォルトでは、Object.assign({}, ownProps, stateProps,dispatchProps) の結果が返されます。
オプション:
pure = true は、Connect コンテナコンポーネントがストアの状態と shouldComponentUpdate 内の ownProps の浅い比較を実行して、変更が発生したかどうかを判断し、パフォーマンスを最適化することを意味します。 false の場合、比較は実行されません。
実際、connect は何も行いません。ほとんどのロジックは、それが返す WrapWithConnect 関数に実装されます。正確には、これは、wrapWithConnect で定義された Connect コンポーネントに実装されます。
以下は完全な React --> redux --> React プロセスです:
1. Provider コンポーネントは redux ストアを props として受け入れ、コンテキストを通じてそれを渡します。
2. connect 関数は、初期化中に mapDispatchToProps オブジェクトをストアにバインドします。mapDispatchToProps が関数の場合、Connect コンポーネントがストアを取得した後、受信した store.dispatch とアクションに従って、bindActionCreators を通じてバインドされます。返されたオブジェクトはストアにバインドされます。connect 関数は、wrapWithConnect 関数を返します。同時に、wrapWithConnect が呼び出され、ui コンポーネントが渡されます。wrapWithConnect は、Connect extends クラスを内部的に使用します。
コンポーネントは Connect コンポーネントを定義します。その後、Connect コンポーネントはコンテキストを通じてストアを取得し、store.getState を通じて完全な状態オブジェクトを取得し、stateProps オブジェクト、mapDispatchToProps を返します。 object または mapDispatchToProps 関数は、dispatchProps オブジェクトを返します。stateProps、dispatchProps、および Connect コンポーネントの props は、Object.assign() または mergeProps を通じて props にマージされ、ui コンポーネントに渡されます。次に、ComponentDidMount で store.subscribe を呼び出し、コールバック関数 handleChange を登録して、状態の変化を監視します。
3. このとき、ui コンポーネントは props 内で actionCreator を見つけることができ、dispatch では自動的に getState が呼び出され、状態全体が取得されます。ストアは状態の変更をリッスンするために登録され、アクションは CombineReducers に渡され、状態のキー値に従ってサブ Reducers にアクションが渡されます。 -reducers。reducers は action.type を判断するために順番に実行され、存在する場合は新しい状態が返され、存在しない場合はデフォルトに戻ります。 combineReducers は、子 Reducer によって返された個々の状態を新しい完全な状態に再度結合します。この時点で状態が変化しました。 Connect コンポーネントで呼び出されるサブスクライブは、状態の変化をリッスンしてから、handleChange 関数を呼び出します。内部的には、handleChange 関数は最初に getState を呼び出して新しい状態の値を取得し、古い状態と新しい状態の浅い比較を実行します。異なる場合は、mapStateToProps を呼び出し、古い状態と新しい状態を簡単に比較します。それらが同じでない場合は、this.setState() を呼び出して Connect コンポーネントの更新をトリガーし、ui コンポーネントを渡して、ui コンポーネントの更新をトリガーします。このとき、ui コンポーネントは新しい props を取得して反応します。
-->redux -->React の 1 回限りのプロセスが終了します。
上記は少し複雑ですが、プロセスの簡略化されたバージョンは次のとおりです:
1. Provider コンポーネントは redux ストアを props として受け入れ、コンテキストを通じてそれを渡します。
2. connect 関数は Provider からストアを受け取り、mapStateToProps、mapDispatchToProps、コンポーネントの 3 つのパラメーターを受け取り、state と actionCreator を props としてコンポーネントに渡します。このとき、コンポーネントは actionCreator 関数を呼び出してリデューサーをトリガーできます。関数を使用して新しい状態を返し、connect で状態の変化を監視し、setState を呼び出してコンポーネントを更新し、新しい状態をコンポーネントに渡します。
Connect は非常に簡潔に記述できます。mapStateToProps と mapDispatchToProps は渡されるコールバック関数です。名前は固定されておらず、名前を記述する必要さえありません。
簡易版: connect(state => state, action)(Component);
プロジェクト構築
上記は、react、react-router、redux に関する知識ポイントです。しかし、それらを統合して完全なプロジェクトを構築する方法は次のとおりです。
1. まず、react.js、redux、react-router などの基本的なファイルを引用します。npm でインストールし、ファイル内で直接引用することをお勧めします。
2.react.js、redux、react-router から必要なオブジェクトとメソッドを導入します。
「react」から React、{Component, PropTypes} をインポートします。 applyMiddleware} from 'redux';
import { Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } from 'react-router';
3. 要件に従ってトップレベル ui コンポーネントを作成し、各トップレベル ui コンポーネントを作成します。ページに相当します。
4. actionCreators と Reducer を作成し、combineReducers を使用してすべての Reducer を 1 つの大きな Reducer にマージします。 createStore を使用してストアを作成し、combineReducers と applyMiddleware を導入します。 5. connect を使用して、actionCreator、reuder を最上位の ui コンポーネントに関連付け、新しいコンポーネントを返します。 6. connect によって返された新しいコンポーネントを使用して、react-router と連携してルーティングをデプロイし、ルーティング コンポーネント Router を返します。 7. Router を最上位コンポーネント Provider に配置し、Provider の属性として Store を導入します。 8. render を呼び出して Provider コンポーネントをレンダリングし、ページのタグに配置します。 トップレベルの ui コンポーネントは実際には、プロバイダー、ルーター、ルート、接続の 4 つのコンポーネント層でカバーされていることがわかります。これらの 4 つはビューに変更を加えず、機能するだけです。 通常、トップレベルの ui コンポーネントで props を出力すると、一連のプロパティが表示されます。
上の図のトップレベルの ui コンポーネントには合計 18 のプロパティがあります。反応すると、これらのプロパティがどこから来たのか混乱するかもしれません。実際、これらの属性は 5 つの場所から来ます: 
コンポーネントの 1 つのカスタム属性、actionCreator によって返される 6 つのオブジェクト、reducer によって返される 4 つの状態オブジェクト、 Connect コンポーネント、および Router によって挿入される 7 つの属性。 react で遭遇する落とし穴といくつかの小さな知識ポイントをまとめます React を使用するときによく遭遇するさまざまな問題は、遭遇する問題について混乱して無力に感じることになるでしょう。 次に、一般的な問題を分析しましょう。反応する際の注意点など。 1. setState() は非同期です。this.setState() は render メソッドを呼び出しますが、state の値は render メソッドで割り当てられます。したがって、this.setState()実行直後に取得したstateの値は変化しません。レンダー関数が呼び出されないため、同様の状態の直接割り当ては更新をトリガーしません。
2. コンポーネントのライフサイクル
componentWillMount とcomponentDidMount は初期化中にのみ呼び出されます。
componentWillReceivePorps、 shouldComponentUpdate、componentWillUpdata、componentDidUpdate は、初期化中ではなく、コンポーネントが更新されたときにのみ呼び出されます。
3. Reducer はコンポーネントの更新を開始するために新しいオブジェクトを返す必要があります
connect 関数では、新しい状態と古い状態が軽く比較されるため、状態の値が変化するだけで参照アドレスが変化しない場合、connect は考慮します。それらは同じであり、更新をトリガーするものではありません。
4. リデューサーによって返される状態が変化するかどうかに関係なく、subscribe に登録されているすべてのコールバック関数がトリガーされます。
5. コンポーネント名の最初の文字は大文字にする必要があります。これがクラス名の標準です。 6. コンポーネントをアンインストールする前に、dom 要素に追加されたリスニング イベントとタイマーを手動でクリアする必要があります。これらは React の制御範囲内にないため、手動でクリアする必要があります。 7. オンデマンドでロードするときにコンポーネントがデフォルトのエクスポートを通じて公開される場合、デフォルトを require.ensure に追加する必要があります。
require.ensure([], require => {
cb(null, require('../Component/saleRecord').default)
},'saleRecord')ログイン後にコピー
8、react的路由有hashHistory和browserHistory，hashHistory由hash#控制跳转，一般用于正式线上部署，browserHistory就是普通的地址跳转，一般用于开发阶段。
9、标签里用到的，for 要写成htmlFor，因为for已经成了关键字。
10、componentWillUpdate中可以直接改变state的值，而不能用setState。
11、如果使用es6class类继承react的component组件，constructor中必须调用super，因为子类需要用super继承component的this，否则实例化的时候会报错。
本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
