react-redux 的总结

　　第一步，咱们将咱们要使用的插件来先一步进行安装

　　　　create-react-app app  // 在这里咱们使用了 react 的脚手架来搭建的项目

　　　　cd app 　　　　　　 // 进入咱们的项目

　　　　npm i -S redux 　　// 这里时咱们须要下载的 redux 组件通讯的插件

　　　　npm i -S prop-types 　　// 咱们的较验规则

　　　　npm i -S react-redux　　// 咱们的 react 版的 redux 为了就是更方便的使用 redux

　　　　npm i -S redux-thunk　　// 异步加载咱们的代码

　　　　npm i -D redux-devtools-extension　　// 咱们能够在谷歌中下载 redux 的插件，而后在项目中下载 redex-devtools-extension 的插件，咱们就能在谷歌浏览器中实时的掌握 redux 的数据

　　　　npm i -S react-router　　// 咱们的路由插件

　　这样咱们便把咱们想要的东西都下载的差很少了，ui 框架，则是看我的的喜爱来进行下载，咱们在这里主要说的时 react-redux 在 react 中的用法（组件之间的通讯）

　　第一步：目录，在 src 下的目录建立一个 store 的文件

　　　　store 的文件下，拥有 4 个文件夹，分别是 actions-type.js　　actions.js　　reducers.js　　store.js 的文件，咱们的数据都是在这里面进行操做

　　　　在这里说一下，react 推荐咱们将组件分为 ui 组件和逻辑组件，可是，咱们仍是将其合为一体的好，为了代码的可读性；

　　　　好比咱们要修改 store 里面的数据，咱们应该将数据交给 actions.js ，将逻辑代码交给 reducers.js，actions-type.js 表明咱们写的事件什么的必定要是惟一的，store.js 表明咱们进行配置 store；

　　组件将会经过由 Provider 中将里面的数据，传给全部的组件，均可以经过 connect 里面，绑定事件，而后经过 this.props 来进行接收

　　老规矩：来看每一个文件的代码

　　　　actions-type.js　　在这里咱们将事件的类型变成惟一的，防止进行错误的操做

　　　　

　　　　actions.js　　在这里咱们处理的就是组件传递过来的事件数据，设置 type 类型，而后咱们的 异步加载数据，也是在这里实现的

　　　　

 

 　　　　reducers.js　　在这里，咱们获得了数据获得的数据，咱们就要处理逻辑的东西，而且咱们不能改变原始的数据，只能返回新的对象

　　　　

 

 　　　　  // 这里呢，咱们是有两个数据来进行这样的处理，因此要使用 redux 中带的东西

 

　　　　store.js　　在这里咱们要对数据管理对象 store 来进行配置，在这里咱们须要使用中间件，createStore() 的第二个参数，就是一个中间件，来配置 store 对象

　　　　

 

 　　　　Index.js　　// 在这里咱们主要是渲染页面，而后将 store 放在了 Provider 的组件上，App 是咱们最大的跟组件，这样咱们就能经过 redux 的方法，来获取到 actions.js 来提供的方法，是咱们将数据放进去

　　　　

 

 　　　　App.js 　　react-redux 提供了 connect 的方法，来将 state 数据，和 方法，放在了 App 的组件上，使咱们的组件就能够经过 props 来使用这些方法和数据了

　　　　

 

 　　　　

 

 　　　　Left.js  (Left 组件) 咱们的子组件和不想关的组件，咱们也可使用 store 的方法，咱们在任何地方均可以使用，咱们的使用方法和 App 组件的相似，只不过最后暴露的 Left 组件