用React-redux搭建的小案例分析

用React-redux搭建的小案例分析

先放张redux的工作流程图，还有react-redux模型图

Redux 是一个专门用于做状态管理的 JS 库（不是react插件库） ，跟react没啥联系，只不过在react项目中可以使用。作用主要是集中式管理react应用中多个组件共享的状态

redux文件夹

1. 先建一个redux 文件夹 ，因为会涉及到很多组动作以及reducer去处理，所以要单独建两个文件夹 actions 、reducers 来放置各个组件的动作对象和reducer

2. 在actions文件夹里面创建属于每个组件的创作动作对象的 js 文件，
   如果需要进行异步操作，可以引入store，从而调用store身上的diapatch属性
   在这个文件里向外暴露创造动作对象的函数，而该函数返回一个包含动作类型和数据的对象

3. （1）在redusers文件夹里面放置属于每个组件的reducer处理文件
   该文件的本质就是创建一个对应组件服务的reducer，reducer的
   本质就是一个函数
   向外暴露一个函数，该函数接收两个参数，一个是之前的状态，一个是动作对象，函数里面要写一个 switch函数 ，来匹配传进来的动作对象的动作类型进行某些操作
   （2）因为要合并所有的reducer传给store，所以在store . js 文件里面一个一个引入太麻烦了，索性在reducer文件夹里建一个 index . js 文件，在该文件里进行 reducer的合并，并向外暴露一个合并后的 reducer
   

4. constant . js 文件里面用于定义action中type类型的常量值,目的只有一个：便于管理的同时，防止写错
   

5. store . js 文件，该文件向外暴露一个store对象，整个项目只有一个store对象
   

redux文件夹完成后，就是在各个组件中去使用redux

因为又要使用react-redux，所以在各个组件的 index . jsx 文件里面，要进行UI组件和容器组件的结合，就要从 ‘ react - redux ’ 库里面引用{ connect }

connect（）（）
connect（两个参数）（UI组件名字）
两个参数都是函数，第一个是返回store里储存的对象的函数
第二个是返回操作状态对象的函数 ，目的是传给上方的UI组件使用

最后打包项目：

1. npm run build
2. 借助一个库 serve ，可以以该文件夹为根目录快速开启一台服务器
3. 全局安装这个库 npm i serve -g
4. serve build