redux项目实战应用笔录

（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

　　详见React之自定义redux.

　　

.