React 结合Immutable实现 案例

业务：点击按钮实现数量的增加

创建react项目

$ npx create-react-app react-immutable

进入项目，安装插件

$ yarn add redux immutable react-redux redux-immutable

在src目录下新建components目录，在components目录下新建Button,Content两个组件

import React, { Component } from 'react'

import {connect} from 'react-redux'

import {bindActionCreators} from 'redux'


import actionCreators from '../store/count/actionCreators';

class Button extends Component{
    render(){
        return(
            <div>
                <button onClick={this.props.increment}>+</button>
            </div>
        )
    }
}

export default connect(
    state => ({
        count: state.getIn(['count'])
    }),
    dispatch => bindActionCreators(actionCreators,dispatch)
)(Button) // 在button组件外生成一个容器组件，将外层的属性和方法传递给内部的ui组件

import React, { Component } from 'react'

import {connect} from 'react-redux'

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

export default connect(
    state => ({
        count: state.getIn(['count'])
    })
)(Content)

在src下新建store目录，store目录下新建index.js和reducers.js文件

index.js文件用来打造store

import {createStore} from 'redux';

import reducers from './reducers'

const store = createStore(reducers)

export default store

reducers.js文件用来管理分片的reducers

import { combineReducers} from 'redux-immutable'; // 这里是从redux-immutable引用的combineReducers

import count from '../store/count/reducers'

const reducers = combineReducers({
    // 分片的reducers
    count

})
    

export default reducers

在store目录下新建count目录，用来存放数据分片的文件

state.js 里面存放的是数据（注意 ：这里的数据是由Immutable里的Map打造出来的）

import { Map } from 'immutable'


const state =Map({
    count:0
})

export default state

actionCreators.js文件里存放的是方法 （动作的创建，动作的发送）

import * as type from './type'


const actionCreators = {

    increment(){
      // 创建动作
      const action = {
          type: type.INCREMENT
      }

      // 发送动作  
      return action // 这里动作的发送由dispatch帮我们做了 所以只要返回action就可以了
    }
    
}

export default actionCreators

type.js里存放的是动作的类型

export const INCREMENT = 'increment'

reducers.js里面存放的是对数据的修改，这里因为是由Map打造出来的数据，所以在初始化时不需要解构

import state from './state'

import * as type from './type'

const reducers = (newState=state,action) => {
    
    switch (action.type) {
        case type.INCREMENT:
            return newState.set('count',newState.get('count')+1) // Immutable方法用get来获取数据 用set来设置数据
            break;
    
        default:
            return newState
            break;
    }
}

export default reducers

在根目录文件夹下的index.js引入store和Provider用来生成容器组件，把store以属性形式传递给根组件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import store from './store'

import {Provider} from 'react-redux'

ReactDOM.render(
    <Provider store = {store}>
        <App />
    </Provider>
, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

在Content组件上引入connect生成容器组件，以属性形式获取数据

export default connect(
    state => ({
        count: state.getIn(['count'])
    })
)(Content)

 <p>count: { this.props.count.get('count')}</p>

在Button组件上引入connect生成容器组件，以属性形式使用方法

export default connect(
    state => ({
        count: state.getIn(['count'])
    }),
    dispatch => bindActionCreators(actionCreators,dispatch)
)(Button)

 <button onClick={this.props.increment}>+</button>