redux&react-redux

redux是什么

1、redux是一个专门用于做状态管理的js库（不是react插件库）。 2、它可以用在react，angular，vue等项目中，但基本与react配合使用。 3、作用：集中式管理react应用中多个组件共享的状态。 4、 redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写

什么情况下需要使用redux

1、某个组件的状态，需要让其他组件可以随时拿到(共享)。 2、一个组件需要改变另一个组件的状态（通信）。 3、总体原则：能不用就不用，如果不用比较吃力才考虑使用。

redux目录

redux

• store.js：该文件专门用于暴露一个store对象，整个应用只有一个store对象
• reducers文件夹：本质是一个函数,接收：preState(第一次时undefined)，-action，返回加工后的状态。
• index.js 根状态文件，将所有reducer文件做集中管理
• actions文件夹：专门用于创建action对象
• contant.js：该模块是用于定义action对象中type类型的常量值 ，目的只有一个：便于管理的同时防止单词写错62

方法

• subscribe：监测redux中状态的改变,如redux的状态发生了改变，就执行一次 语法：store.subscribe( ()=>{} )
• dispatch：传递action{type:’’,data:’’}
• getState：获取store的值

api

• createStore ：专门用于创建redux中最为核心的store对象
• applyMiddleware ：中间件，用于配合redux-thunk(插件，需要引入)支持异步
• combineReducers ：当有多个状态时需要使用，可以将状态合并为一个对象

react-redux

react-redux目录

• containers 用来放置容器组件和UI组件（直接将UI组件和容器组件写入一个jsx文件即可）

概念

• UI组件:不能使用任何redux的api,只负责页面的呈现,交互等.
• 容器组件:负责和redux通信,将结果交给UI组件

api

• Provider : 无需自己给容器组件传递store,给根组件包裹一个 即可
• connect:生成一个容器组件,并暴露

//未简写
mapStateToProps(state){}
mapDispatchToProps(dispatch){}
connect(mapStateToProps,mapDispatchToProps)(UI组件)
//mapStateToprops:映射状态,返回值是一个对象，默认接收state作为参数
//mapDispatchToProps:映射操作状态的方法,返回值是一个对象，默认接收dispatch作为参数
//[备注]:容器组件中的store是靠props传进去的,而不是在容器组件中直接介入
//[备注]:mapDispatchToProps,也可以直接是一个对象，会自动注入dispatch（所以对象的方式不用写dispatch）

// 简写
connect(
  state=>({key:value}),//映射状态
  {key:xxxxxAction}//映射操作状态的方法
)(UI组件)

redux&react-redux书写流程

1、src中的index文件

引入Provider 引入store 包裹App<Provider store={store}><App/></Provider>

2、store文件

引入createStore 有异步操作引入 applyMiddleware 和引入并安装插件redux-thunk 引入合并为对象的rootReducer 导出语句export default createStore(rootReducer, applyMiddleware(thunk))

3、containers文件夹

容器组件与UI组件合并到一个文件 引入connect 引入actions中的需要用到的回调 导出connect(映射状态---mapStateToprops(state),映射操作状态的方法--mapDispatchToProps(dispatch))(UI组件)

4、contant文件

写入需要用到的常量分别导出

5、actions文件夹

引入常量 配置对象分别导出

6、reducers文件夹

引入常量 配置函数导出

书写流程规模化

这些是固定流程的处理（只用写一次） redux配置有些只用写一次的就直接提炼出来，每次直接拖入文件即可 react-redux：index文件引入Provider包裹</App>

接下来就是每次加入新文件都要做的操作了 1，centant文件中添加常量 2，新增加reducer文件和action文件 3，reducers文件夹的index文件中引入心创建的reducer文件 4，containers中添加文件写入容器和UI组件（引入action文件暴露的API） 5，最后就是connect完成联动