react redux 二次开发流程

在一个大项目中如何引入redux及其相关技术栈（react-redux redux-thunk redux-immutable ），已经成为react前端工程师不可或缺的技能，下面通过实现一个简单的todolist效果，来介绍相关流程

1.引入redux进行应用数据管理，安装相关依赖

yarn add redux  react-redux redux-thunk redux-devtools-extension

一般目录结构

2.创建好store.js、reducer.js、action.js、action-types.js

1)store.js

 /*

 redux最核心的管理对象store

  */

 import {createStore} from 'redux'

 import reducer from './reducer'

 const  store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

 // 向外默认暴露store

 export default  store

2) reducer.js

 import {CHANGEINPUT,ADDITEMS } from './action-types'

 const defalutState = {

     inputValue : 'wuxiaohui',

     list :[]

 }

 export default (state = defalutState,action) =>{

     if(action.type === CHANGEINPUT){

         let newState = JSON.parse(JSON.stringify(state))//深拷贝

         newState.inputValue = action.value

         return newState

     }

     if(action.type === ADDITEMS){

         let newState = JSON.parse(JSON.stringify(state))

         newState.list.push(newState.inputValue)

         newState.inputValue = ''

         return newState

     }

     return state

 }

3)action.js

import {CHANGEINPUT,ADDITEMS } from './action-types'

export const inputChange = (e)=>({

    type:CHANGEINPUT,

    value:e.target.value

})

export const clickButton = ()=>({

    type:ADDITEMS

})

4)action-types.js

/*

包含n个action type常量名称的模块

 */

export const CHANGEINPUT = 'change_input'

export const ADDITEMS = 'add_item'

3.创建todolistui组件

编写TodolistUI.js,由于没有双向绑定，通过onChange的inputChange事件拿到输入值并通过inputValue传回给输入框，clickButton则是向list中追加输入框中输入的数据，输入后清空。该逻辑在 reducer.js中体现，UI组件只负责展示。

//把TodoList改为UI组件-提高性能

import React from "react";

 const TodoListUI =(props)=>{

// 接收connect连接器映射传递的属性和函数

    let {inputValue ,inputChange,clickButton,list} = props;

    return (

        <div>

            <div>

                <input value={inputValue} onChange={inputChange} />

                <button onClick={clickButton}>提交</button>

            </div>

            <ul>

                {

                    list.map((item,index)=>{

                        return (<li key={index}>{item}</li>)

                    })

                }

            </ul>

        </div>

    );

}

export  default TodoListUI

4.引入react-redux进行应用数据管理

1）总入口中index.js中引入react-redux和容器组件APP

react-redux的核心：Provider（用于入口）和 connect（用于数据和函数映射）

使用provider

/*

入口js

 */

import React from 'react';

import ReactDOM from 'react-dom';

import App from './containers/App';

import { Provider} from 'react-redux'

import store from './redux/store'

//<Provider>是一个提供器，只要使用了这个组件，组件里边的其它所有组件都可以使用store了

//声明一个App容器组件，然后这个组件用Provider进行包裹。

const  AppList = (

    <Provider store={store}>

        <App />

    </Provider>

)

ReactDOM.render(AppList, document.getElementById('root'));

2）connect连接器（连接UI组件和redux中的action.js方法）成为容器组件

connect-连接器用来将redux管理的state数据映射成UI组件的一般属性（如输入框的值）

connect-连接器用来将redux管理的包含diaptch代码的函数映射成UI组件的函数属性的函数

1.在redux目录中的action.js定义UI组件要调用的方法，然后编写好reducer的业务逻辑

2.在containers容器APP组件中引入UI组件TodolistUI和action进行连接

import React from 'react'

import {connect} from 'react-redux'

import TodoListUI from '../components/TodoListUI'

import {inputChange,clickButton} from '../redux/actions'

/*

connect-连接器用来将redux管理的state数据映射成UI组件的一般属性（如输入框的值）

 指定向TodoList传入哪些一般属性(属性值的来源就是store中的state)

 */

const stateToProps = (state)=>{

    return {

        inputValue : state.inputValue,

        list:state.list

    }

}

/*

connect-连接器用来将redux管理的包含diaptch代码的函数映射成UI组件的函数属性的函数

（如输入的onChange事件）

可以写多个函数，用逗号隔开

 */

// 写法1

// const dispatchToProps = (dispatch) =>{

//     return {

//         inputChange(e){

//             //派发action到store中：定义action 然后派发

//             //派发后就在reducer里边，编写对应的业务逻辑了

//             let action = {

//                 type:'change_input',

//                 value:e.target.value

//             }

//             dispatch(action)

//         },

//         clickButton(){

//

//             let action = {type:'add_item'}

//             dispatch(action)

//         }

//     }

// }

//export default connect(stateToProps,dispatchToProps )(TodoListUI);

// 写法2

export default connect(stateToProps,{inputChange,clickButton} )(TodoListUI);

5.引入 immutablejs

首先，我们有必要来划分一下边界，哪些数据需要使用不可变数据，哪些数据要使用原生js数据结构，哪些地方需要做互相转换

在redux中，全局state必须是immutable的，这点毋庸置疑是我们使用immutable来优化redux的核心
组件props是通过redux的connect从state中获得的，并且引入immutableJS的另一个目的是减少组件shouldComponentUpdate中不必要渲染，shouldComponentUpdate中比对的是props，如果props是原生JS就失去了优化的意义
组件内部state如果需要提交到store的，必须是immutable，否则不强制
view提交到action中的数据必须是immutable
Action提交到reducer中的数据必须是immutable
reducer中最终处理state必须是以immutable的形式处理并返回
与服务端ajax交互中返回的callback统一封装，第一时间转换成immutable数据

1）安装相关依赖

yarn add immutable  redux-immutable

2）在reducer中 immutable的fromJs，把defalutState 转为immutable数据

 // 引入fromJS 将state数据转变为 immutable对象

 const defalutState = fromJS({

     inputValue : 'wuxiaohui',

     list :[]

 });

 //immutablejs的相关接口——使用get 和set 方法来改变state

 export default (state = defalutState,action) =>{

     if(action.type === CHANGEINPUT){

         // let newState = JSON.parse(JSON.stringify(state)) //深拷贝

         // newState.inputValue = action.value

         // return newState

         return  state.set('inputValue',action.value)

     }

     if(action.type === ADDITEMS){

         // let newState = JSON.parse(JSON.stringify(state))

         // newState.list.push(newState.inputValue)

         // newState.inputValue = ''

         // return newState

         return state.merge({

             'list': state.get('list').push(state.get('inputValue')),

             'inputValue': ''

         });

     }

     return state

 }

3）在容器组件中App.js中映射时使用get获取相关属性值

 /*

 connect-连接器用来将redux管理的state数据映射成UI组件的一般属性（如输入框的值）

  指定向TodoList传入哪些一般属性(属性值的来源就是store中的state)

  */

 const stateToProps = (state)=>{

     return {

         // inputValue : state.inputValue,

         // list:state.list

         //因为引入了immutable，state 已变为不可变对象只能调用get或set方法

         inputValue : state.get('inputValue'),

         list:state.get('list')

     }

 }

4）redux-immutable在reducer的处理

combineReducers(reducers)

https://cn.redux.js.org/docs/api/combineReducers.html

随着应用变得越来越复杂，可以考虑将 reducer 函数拆分成多个单独的函数，拆分后的每个函数负责独立管理 state 的一部分

参考文档 https://www.cnblogs.com/superlizhao/p/9474859.html

类似这样

 import { combineReducers } from 'redux';

 import { reducer as headerReducer } from '../common/header/store';

 import { reducer as homeReducer } from '../pages/home/store';

 import { reducer as detailReducer } from '../pages/detail/store';

 import { reducer as loginReducer } from '../pages/login/store';

 const reducer = combineReducers({

    header: headerReducer,

    home: homeReducer,

    detail: detailReducer,

    login: loginReducer

 });

 export default reducer;

假如我们的reducer在header中，组件中获取数据时，用get方法

const mapStateToProps = (state) => {

    //inputValue是immutable对象，不能用state.header.inputValue的形式获取，要用get()

      return  {

          inputValue :state.header.get('inputValue')，

          list:state.header.get('list')

      }

}

在使用了redux-immutable 后

 //combineReducers不再用rudux里的，而是redux-immutable里的，这样combineReducers里的对象就是一个immutable对象

 //import {combineReducers} from 'redux'

 import {combineReducers} from 'redux-immutable'

 import {reducer as headerReducer} from '../common/header/store'

 const reducer=combineReducers({

     header:headerReducer

 });

 export default reducer;

获取数据的时候用get()，或者getIn()--获取结构化数据

 const mapStateToProps = (state) => {

       return  {

           //inputValue :state.header.get('inputValue')，

          // list:state.header.get('list')

              inputValue :state.getIn(['header','inputValue'])，

              list:state.getIn(['header','list'])

       }

 }

流程中例子详见GitHub

https://github.com/scalerone/ReduxDemo