react的 redux，分片版本

react的 redux，分片版本

redux的使用流程

1.安装 redux

yarn add redux

2.在src目录下创建store文件夹

3.在sore中创建文件 ： index.js ：全局的一些方法 , reducer.js：管理所有reducer的地方

4.每个的数据单独放一个文件夹，例如count文件夹

5.在count文件夹中创建四个文件： actionCreators.js：发送数据 , reducer.js：修改数据 , type.js：存储常量 , state.js：存储数据

创建pages文件，在pages文件中单独创建各自的文件夹

在app件建中引入

store中index.js中的代码，用来写一些全局的方法

    
import { createStore } from 'redux';//引入 createStore方法

import reducer from './reducer'

const store = new createStore( reducer );//实例化这个方法，传入参数reducer

export default store

store中reducer的代码，用于管理redux所有的reducer

    
import { combineReducers } from 'redux'//这个方法用来管理所有的 reducer

import count from './count/reducer'//引入子reducer

const reducer = new combineReducers({
    count//注册子reducer
})
export default reducer;

count中 actionCreators中的代码，用来创建动作

    
import * as type from './type';//用来引入type中的常量

import store from '../index'//引入store中的 index.js

// actionCreators是一个对象，对象创建一些方法，用来创建一个动作
const actionCreators = {
    increment () {//创建动作的方法，需要在视图组件中触发这个方法
        let action = {
            type: type.INCREMENT
        }
        store.dispatch(action)//发送动作必须通过store.dispatch来发送
    }
}
export default actionCreators;

count中 reducer.js代码 用于修改数据

    
import * as type from './type';

import state from './state';

//reducer是一个纯函数，可以有两个参数，一个是prestate，表示旧的，出事的数据，一个是action，就是actionCreators页面发送过来的数据
//prestate = state使用了el6的给参数赋予初始值，当传入新的值时会覆盖这个值
const reducer = ( prestate = state,action ) => {
    const newState = {//使用es6的展开字符串实现深拷贝，这样newState中就有了state中的所有数据
        ...prestate
    }
    switch (action.type) {//通过switch判断传过来的是哪个方法
        case type.INCREMENT://这个值是actioncreators中 动作里面的type
            newState.count++//用户操作，可以改变数据，操作数据
        break;
        
        default:
        break;
    }
    return newState//最后一定一定要把数据返回出去，只有这里返回了，store.getState()才能获取到数据
}
export default reducer

type代码，存储常量

export const INCREMENT = INCREMENT //这是定义一个常量，用来判断是哪个方法

state代码，存储初始数据

    
const state = {
    count: 0,
    name:'zhangyue'
}
export default state;

store中代码基本完成，写pages中的代码

count.js 代码,视图组件

    
import React,{ Component,Fragment } from 'react';

import actionCreators from '../../store/count/actionCreators'//注意，这里引入的是count中的actionCreators.js

import store from '../../store'

class Count extends Component{
    constructor () {
        super()
        this.state = {
       //redux中为我们写好了一个方法用来获取数据，store.getState()
            count: store.getState().count.count//赋予初始值,当使用了 reducer 分片之后，每个数据外面都包裹了一个相对应的对象，需要先点这个对象，才能获取到值
        }
    }
    
    //初始化阶段有两次修改数据的机会，一个是componentDidMount(),  一个是compoenntWillMount(),二选一
     //redux中需要通过事件的发布订阅来修改数据，redux中已经帮我们写好了事件的发布，我们只需要通过store.subscribe()方法来触发
    componentDidMount () {//重新获取数据，重新赋值
    
        store.subscribe( () => {//一定要记得使用store.subscribe来触发getState（）方法
            this.setState({ //改变初始值
                 count: store.getState().count.count
            })
        })
    }
    
    increment = () => {
        actionCreators.increment()//发送请求到actionCreatoes，actionCreators再通过store.dispatch()将动作发送到reducer中，reducer中修改数据，再return出来，我们就可以通过 store.getState()方法获取到新的数据
    }
    
    render () {
        let { count } = this.state
        return (
            <Fragment>
                <button onClick = { this.increment }> 点击+ </button>
                <p> { count } </p>
            </Fragment>
        )
    }
}
export default Count;

App代码

    
import React from 'react';

import './App.css';

import Count from './pages/count';//引入count组件

import Main from './pages/main'

function App() {
return (
    <div className="App">
        <Count></Count>
        <Main></Main>
    </div>
  );
}
export default App;