redux的分离一

---

前言

提示：Reduce的使用参考上一篇博文:redux初识

---

一、使用步骤

1. 目录结构如下:

1.1action/index.js

代码如下（示例）：

let actionType = {
    ADDNUM:"ADDNUM",
    REDUCERNUM:"REDUCERNUM",
}

export default actionType;

1.2action/numReducer.js

代码如下（示例）：

import actionType from './index';

let add = (num)=>{
    return {
        type:actionType.ADDNUM,
        playload:num
    }
}

let reducer = (num)=>{
    return {
        type:actionType.REDUCERNUM,
        playload:num
    }
}

export {add,reducer};

1.3reducer/numReducer.js

代码如下（示例）：

import actionType from '../action/index';

let numReducer = (state={num:10},action)=>{
    switch (action.type) {
        case actionType.ADDNUM:
            return {num:state.num + action.playload}
        case actionType.REDUCERNUM:
            return {num:state.num - action.playload}
    }
    return state;
}

export default numReducer;

1.4store/index.js

代码如下（示例）：

import numReducer from '../reducer/numReducer';
import {createStore} from 'redux';

let store = createStore(numReducer);

export default store;

2.页面调用

2.1view/Header.js

代码如下（示例）：

import React, { Component } from 'react'
import store from '../store/index';
export default class Header extends Component {
    render() {
        return (
            <div>
                头部
                {store.getState().num}
            </div>
        )
    }
}

2.2view/Content.js

代码如下（示例）：

import React, { Component } from 'react'
import store from '../store'
import {add} from '../action/numReducer';

export default class Content extends Component {
    render() {
        return (
            <div>
                内容
                {store.getState().num}
                <button onClick={()=>{
                    store.dispatch(add(10)); 
                }}>+10</button>
            </div>
        )
    }
}

2.3view/Footer.js

代码如下（示例）：

import React, { Component } from 'react'
import {reducer} from '../action/numReducer';
import store from '../store/index';
export default class Footer extends Component {
    render() {
        return (
            <div>
                底部
                <button onClick={()=>{
                    store.dispatch(reducer(5));
                }}>-5</button>
            </div>
        )
    }
}

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。