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
})Copier après la connexion
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 };
}Copier après la connexion
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)
};
}Copier après la connexion
mapDispatchToProps返回的对象其属性其实就是一个个actionCreator，因为已经和dispatch绑定，所以当调用actionCreator时会立即发送action，而不用手动dispatch。ownProps的变化也会触发mapDispatchToProps。
mergeProps(stateProps, dispatchProps, ownProps)：
Fusionnez les objets renvoyés par mapStateToProps() et mapDispatchToProps() et les propres accessoires du composant dans de nouveaux accessoires et transmettez-les au composant. Le résultat de Object.assign({}, ownProps, stateProps, dispatchProps) est renvoyé par défaut.
options :
pure = true signifie que le composant conteneur Connect effectuera une comparaison superficielle de l'état du magasin et de ownProps dans ShouldComponentUpdate pour déterminer si cela se produit, des changements sont nécessaires pour optimiser les performances. Si faux, aucune comparaison ne sera effectuée.
En fait, connect ne fait rien. La plupart de la logique est implémentée dans la fonction wrapWithConnect qu'elle renvoie. Pour être précis, elle est implémentée dans le composant Connect défini dans wrapWithConnect.
Ce qui suit est un processus complet de réaction --> redux --> de réaction :
1. Le composant Provider accepte le magasin redux comme accessoire, puis le transmet à travers le contexte.
2. La fonction connect liera l'objet mapDispatchToProps au magasin lors de l'initialisation. Si mapDispatchToProps est une fonction, une fois que le composant Connect aura obtenu le magasin, il sera lié via bindActionCreators en fonction du store.dispatch entrant et action. Ensuite, liez l'objet renvoyé au magasin. La fonction connect renverra une fonction wrapWithConnect. En même temps, wrapWithConnect sera appelé et un composant ui sera transmis. wrapWithConnect utilise la classe Connect extends en interne.
Le composant définit un composant Connect. Le composant ui entrant est un sous-composant de Connect. Ensuite, le composant Connect obtiendra le magasin via le contexte et obtiendra l'objet d'état complet via store.getState. Transmettez l'état dans mapStateToProps et renvoyez l'objet stateProps, mapDispatchToProps. object ou La fonction mapDispatchToProps renverra un objet dispatchProps. Les accessoires des composants stateProps, dispatchProps et Connect sont fusionnés en accessoires via Object.assign() ou mergeProps et transmis au composant ui. Appelez ensuite store.subscribe dans ComponentDidMount et enregistrez une fonction de rappel handleChange pour surveiller les changements d'état.
3. À ce stade, le composant ui peut trouver l'actionCreator dans les accessoires. Lorsque nous appelons actionCreator, dispatch sera automatiquement appelé dans dispatch, getState sera appelé pour obtenir l'état complet, et un écouteur. sera enregistré pour surveiller les changements d'état. Store Transmettez l'état et l'action obtenus à combineReducers. CombineReducers transmettra l'état aux sous-réducteurs en fonction de la valeur clé de l'état et transmettra l'action à tous les sous-réducteurs. être exécuté dans l'ordre pour juger de l'action.type, et renvoyer s'il y en a un. Un nouvel état, ou la valeur par défaut s'il n'en existe pas. combineReducers combine à nouveau les états individuels renvoyés par les réducteurs enfants dans un nouvel état complet. A cette époque, l’état a changé. L'abonnement appelé dans le composant Connect écoutera le changement d'état, puis appellera la fonction handleChange. Dans la fonction handleChange, il appelle d'abord getState pour obtenir la nouvelle valeur d'état et effectue une comparaison superficielle entre l'ancien et le nouveau état. les mêmes, ils reviendront directement. S'ils sont différents, ils appelleront mapStateToProps. Obtenez les stateProps et comparez brièvement l'ancien et le nouveau stateProps, s'ils sont identiques, revenez directement et terminez sans aucune opération ultérieure. S'ils ne sont pas identiques, appelez this.setState() pour déclencher la mise à jour du composant Connect, transmettez le composant ui et déclenchez la mise à jour du composant ui. À ce moment, le composant ui obtient de nouveaux accessoires, réagissez.
---> redux ---> Le processus unique de React se termine.
Ce qui précède est un peu compliqué. La version simplifiée du processus est la suivante :
1 Le composant Provider accepte le magasin redux comme accessoire, puis le transmet. à travers le contexte.
2. La fonction connect reçoit le magasin du fournisseur, puis accepte trois paramètres mapStateToProps, mapDispatchToProps et le composant, et transmet l'état et l'actionCreator au composant en tant qu'accessoires. À ce stade, le composant peut appeler la fonction actionCreator. pour déclencher La fonction réducteur renvoie le nouvel état. Connect écoute le changement d'état et appelle setState pour mettre à jour le composant et transmettre le nouvel état dans le composant.
Connect peut être écrit de manière très concise. mapStateToProps et mapDispatchToProps ne sont que les fonctions de rappel transmises. La fonction connect les appellera si nécessaire. Le nom n'est pas fixe et vous n'avez même pas besoin d'écrire un nom.
Version simplifiée : connect(state => state, action)(Component);
Construction du projet
Les points de connaissances mentionnés ci-dessus sur React, React-Router et Redux . Mais comment les intégrer pour construire un projet complet.
1. Citez d'abord les fichiers de base tels que réagir.js, redux, réagir-router, etc. Il est recommandé de l'installer avec npm et de le citer directement dans le fichier.
2. Présentez les objets et méthodes requis de React.js, Redux et React-Router.
importer React, {Component, PropTypes} depuis 'react';
importer ReactDOM, {render} depuis 'react-dom';
importer {Provider, connect} depuis 'react-redux' ;
importer {createStore, combineReducers, applyMiddleware} depuis 'redux';
importer {Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } depuis 'react-router';
3. à Il est nécessaire de créer des composants d'interface utilisateur de niveau supérieur, et chaque composant d'interface utilisateur de niveau supérieur correspond à une page.
4. Créez des actionCreators et des réducteurs, et utilisez combineReducers pour fusionner tous les réducteurs en un seul grand réducteur. Utilisez createStore pour créer un magasin et introduire combineReducers et applyMiddleware.
5. Utilisez connect pour associer actionCreator, reuder au composant ui de niveau supérieur et renvoyer un nouveau composant.
6. Utilisez les nouveaux composants renvoyés par connect pour coopérer avec React-Router afin de déployer le routage et renvoyer un composant de routage Router.
7. Placez le routeur dans le composant de niveau supérieur Provider et introduisez store comme attribut du fournisseur.
8. Appelez render pour restituer le composant Provider et placez-le dans la balise de la page.
Vous pouvez voir que le composant d'interface utilisateur de niveau supérieur est en fait couvert par quatre couches de composants, Provider, Router, Route et Connect. Ces quatre couches n'apporteront aucune modification à la vue, elles sont uniquement fonctionnelles.
Habituellement, lorsque nous imprimons des accessoires sur le composant ui de niveau supérieur, nous pouvons voir un tas de propriétés :
Le composant ui de niveau supérieur dans le L'image ci-dessus a un total de 18 propriétés. Si vous êtes nouveau dans la réaction, vous ne savez peut-être pas d'où viennent ces attributs. En fait, ces attributs proviennent de cinq endroits :
1 attribut personnalisé du composant, 6 objets renvoyés par actionCreator, 4 états renvoyés par le réducteur et Connect. Il y a 0 attribut de composant et 7 attributs injectés par le routeur.
Résumé des pièges rencontrés dans React et quelques petits points de connaissances
Vous rencontrez souvent divers problèmes lors de l'utilisation de React. Si vous n'êtes pas familier avec React, vous rencontrerez le problème qui semble déroutant et impuissant. . Analysons ensuite les problèmes et les points d'attention faciles à rencontrer en réaction.
1. setState() est asynchrone
this.setState() appellera la méthode de rendu, mais il ne changera pas immédiatement la valeur de l'état. L'état est attribué dans la méthode de rendu. Par conséquent, la valeur de state obtenue immédiatement après l’exécution de this.setState() reste inchangée. La même affectation directe d'état ne déclenchera pas la mise à jour car la fonction de rendu n'est pas appelée.
2. Cycle de vie des composants
componentWillMount et composantDidMount ne sont appelés que lors de l'initialisation.
componentWillReceivePorps, ShouldComponentUpdate, ComponentWillUpdata, ComponentDidUpdate ne sont appelés que lorsque le composant est mis à jour, pas lors de l'initialisation.
3. Le réducteur doit renvoyer un nouvel objet pour lancer les mises à jour des composants
Parce que dans la fonction de connexion, une comparaison superficielle de l'ancien et du nouveau état sera effectuée si l'état ne change que la valeur mais la. l'adresse de référence ne change pas, connect les considérera comme identiques et ne déclenchera pas de mise à jour.
4. Que l'état renvoyé par le réducteur change ou non, toutes les fonctions de rappel enregistrées dans l'abonnement seront déclenchées.
5. La première lettre du nom du composant doit être en majuscule. Il s'agit de la norme pour la dénomination des classes.
6. Avant la désinstallation du composant, les événements d'écoute et les minuteries ajoutés à l'élément DOM doivent être effacés manuellement, car ils ne sont pas dans la plage de contrôle de React et doivent être effacés manuellement.
7. Si le composant est exposé via l'exportation par défaut lors du chargement à la demande, la valeur par défaut doit être ajoutée à require.ensure.
require.ensure([], require => {
cb(null, require('../Component/saleRecord').default)
},'saleRecord')Copier après la connexion
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 front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
