redux中使用immutable.js

1.安装

yarn add immutable redux-immutable

2.redux中，利用combineReducers来合并多个reduce, 但redux自带的combineReducers只支持原生js形式的，所以需要使用redux-immutable提供的combineReducers来代替redux提供的combineReducers

3.store文件夹下index.js，打造store模块

/* 
  打造store
*/

import { createStore } from 'redux'
import rootReducers from './rootReducers';

const store = createStore( rootReducers )

export default store 

4.在store文件夹下打造分片管理的reducers

/* 
  总的reducers用于管理分片的reducers
*/
// 使用redux-immutable提供的combineReducers方法替换redux里的combineReducers
import { combineReducers } from 'redux-immutable';
import count from './count/reducers'
const rootReducers = combineReducers({
  //分片的reducser导入
  count
})

export default rootReducers

5.打造redux分片数据包

//state.js
//使用从immutable中解构出来的Map模块定义数据
import { Map } from 'immutable'
const state = Map({
  count: 0
})

export default state 
==============================================================
//分片的reducers.js
import state from './state'
import * as type from './type'
const reducers = ( newState = state, action ) => {

  switch ( action.type ) {

    case type.INCREMENT:
      //数据操作
      // newState immutable对象
      return newState.set('count', newState.get('count') + 1 )

      break;
    default:
      return newState
      break;
  }
}

export default reducers
========================================================
//actionCreator.js
import * as type from './type'
const actionCreators = {
  increment () {
    const action = {
      type: type.INCREMENT
    }
    return action 
  }
}
export default actionCreators

6.组件中的使用

import React ,{ Component } from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import actionCreators from '../store/count/actionCreators'

class Content extends Component {
   render(){
      return (
         <div>
            <button onClick ={this.props.increment} >+</button>
            <p> count: {this.props.count.get('count')}</p>
         </div>
      )
   }
}

//组件要通过props获取属性，在connect的第一个参数的回调函数内，需要使用使用getIn()方法，否则组件内直接获取数据报错
export default connect( state => ({
   count: state.getIn(['count'])
 }) ,dispatch => bindActionCreators(actionCreators,dispatch)
 )(Content)