（1）首先搭建完毕后开始安装依赖
redux react-redux---------->基于redux开发，简化语法 redux-thunk---------->异步中间件，实现redux 异步编程 redux-devtools-extension-------->调试专用，配合chrome拓展程序进行redux调试
（2）建立项目目录和对应文件
src下建立store目录，然后建立文件结构
1、index核心模块
2、reducer纯函数管理模块
注意： * 向外默认暴露的是合并产生的总的reducer函数 * 总的state的结构为： * { * headTitle:'首页', * user:{} * } *
3、actionCreators.js创建行为模块，即action creator函数的模块
4、actionType.js即action的type常量标识名称的模块
（3）开始使用
1、提供器provider包裹根组件
接下来启动项目，在控制台查看redux相关，如下所示
（4）使用redux管理头部标题
1、分析：头部标题主要涉及到左侧导航组件和头部导航组件的交互，左侧导航主要点击时候更新状态，更新时需要对应的action和actionType，所以先编写两者
2、接下来编写reducer更新state
注意：reducer下针对对象、数组、普通变量的修改操作不同，针对普通变量直接修改即可。如果是数组或对象最好使用深拷贝方案进行修改，不要直接修改
因为这里headTitle是对象格式，所以使用深拷贝方式，详见React下reducer中处理数组&&对象的赋值改动.
3、接下来首先在头部导航展示，最后在组件进行事件派发dispatch
先看下之前的做法，之前做法是在初始化时结合当前路径和menus列表对比，然后绑定到组件this实例，最后进行渲染，如下所示
常规做法是用react-redux的connect方法，用容器组件包装UI组件，这里我们未来方便，直接在这里操作
首先在头部组件导入连接器connect映射state和action
注意：
connect传入一般属性用于显示；函数属性用于修改。这里我们只需显示，所以只传入一般属性即可
接下来组件里之前获取设置title的语法便不再需要，删除即可，改为redux获取，如下所示
此时可以显示首页
4、接下来点击左侧导航派发事件，更新store的state即可，所以接下来修改左侧导航组件
还是和之前一样，导入connect方法，传入state映射和行为映射，将UI组件包裹到容器组件里，将组件改为容器组件
注意：
无论读取或是修改store的state，都需要利用connect包装UI组件生成容器组件，即react-redux核心。
然后传入行为映射action，接着触发即可
此时便可以正常预览，且切换时也可以正常显示。但是在某个页面刷新后便丢失了当前页面标题。state又改为了首页... ...，在显示处添加判断即可
此时解决了刷新重置state的问题，但退出重新登录后，会直接记录退出时的state，如下所示，所说还需要进行修改
解方案，登录重定向时直接到/home即可
（5）Redux管理用户数据
1、首先编写一个用于登录的异步action，接收用户名和密码，请求成功后需要发布同步action，所以接下来编写接收用户信息的同步action。
接下来首先编写actionTypes
接下来去reducer做处理
最后合并导出，完整如下
/**纯函数管理模块，根据现有的state和action，返回新的state和action----纯函数 */ import {combineReducers} from 'redux' import storageUtils from '../utils/storageUtils' import { SET_HAED_TITLE, ACCEPT_USER, ERROR_MESSAGE, RESET_USER }from './actionTypes' /**管理头部标题 */ const defaultState = { headTitle:'首页', user:storageUtils.getUser() || {} } /**管理头部标题 */ const headTitle = (state=defaultState.headTitle,action) => { switch(action.type){ case SET_HAED_TITLE: return action.value default: return state } } /**管理用户信息user */ const user = (state=defaultState.user,action) => { switch(action.type){ case ACCEPT_USER: return Object.assign({},state,{...action.value}) case ERROR_MESSAGE: const errorMessage = action.value return {...state,msg:errorMessage}/**演示错误提示，在user添加msg对象 */ case RESET_USER: return {}/**置空store中的user对象 */ default: return state } } /**使用combineReducers整合之前的reducer，变成新的reducer */ export default combineReducers({ headTitle,user })
接下来登录调用action，所以接下来操作Login.jsx组件，如下所示
①引入connect'连接器和异步action
②映射state和action，将组件改为容器组件
③引入使用
此时登录成功后会有报错，如下所示
原因在于我们在项目里很多地方依然使用者自定义内存memoryUtils.js，所以接下来依次更换为容器组件后，读取redux下store的state.user即可
2、退出功能
将之前的操作去除，改为调用action，然后编写退出action----logoutAction
最后利用reducer.js修改state
（6）自定义Redux
.