Redux 数据分片

1. 分析
   一个项目：

   • banenr
   • home
   • mine
   • login
   • register
   • detail
   • shopcar
   • 会员
   • 普通用户数据

2. 解决： 希望的一个类型数据一个模块 ---- > reducer划分 combineReducers

3. 分析： 我们希望我们的store下面每一个文件夹就是一个 类型 的数据包

4. 解决： redux combineReducers
   每一个数据包的目录结构

   • store
     • home
       • state.js
       • type.js
       • reducer.js
       • actionCreator.js
       • 我们需要一个统一的redcuer的管理者

操作步骤：

1. 新建redux项目 安装redux

 npx create-react-app redux_advance
 yarn add redux

2. 在src目录下新建components文件夹，里面新建Button和Content两个组件,在App.js里引入两个组件

Button组件控制视图变化

import React, { Component } from 'react'

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

class Button extends Component{
    add = () =>{
        // 执行的是actionCreators里的方法
        actionCreators.increment()
    }
    render(){
        return(
            <div>
                <button onClick={ this.add }>+</button>
            </div>
        )
    }
}

export default Button

Content组件显示数据

import React, { Component } from 'react'

import store from '../store'

console.log(store.getState())

class Content extends Component{
    constructor(){
        super()
        this.state={
            count: store.getState().count.count // getState() 是store里的方法
        }
    }

    componentDidMount(){ // redux里用store.subscribe做事件的发布与订阅
        store.subscribe(()=>{
            this.setState({
                count: store.getState().count.count
            })
        })
    }
    render(){
        return(
            <div>
                <p>count:{this.state.count}</p>
            </div>
        )
    }
}

export default Content

App组件引入

import React from 'react';

import './App.css';

import Button from './components/Button'

import Content from './components/Content'

function App() {
  return (
    <div className="App">
      <h3>react-进阶</h3>
      <hr/>
      <Button/>
      <Content/>
    </div>
  );
}

export default App;

3. 在src目录下新建store目录，里面存放index.js（store）和reducers.js分片管理文件

index.js文件里面打造store，用于统一发送action

import { createStore } from 'redux'

import reducers from './reducers';

const store = createStore(reducers)


export default store

reducers.js 数据分片管理文件 引入redux里的combineReducers管理分片的reducers

// 纯函数 是用来处理数据的修改的

import {combineReducers} from 'redux'// 管理分片的reducers

import count from './count/reducers'

const reducers = combineReducers({
     // 分片
     count
})

export default reducers
   

4. 在src的store目录下，新建数据分片目录count, 里面存放state.js, actionCreators.js, type.js, reducers.js 文件

state.js文件存放的是数据

const state = {
    count:0
}

export default state

actionCreators.js 里面存放的是方法的定义

import * as type from './type'

import store from '../index' // 用于


const actionCreators = {// 里面存放的是一个方法

    increment(){
        // 用于创建动作
        const action = {
            type:type.INCREMENT
        }
        // 用于发送动作
        store.dispatch(action)
    }
    
}

export default actionCreators

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

export const INCREMENT = 'increment'

reducers.js 里面存放是 数据的修改

// 纯函数
import state from './state'

import * as type from './type'

const reducers = (previousState = state, action) => {

    const newState = {...previousState}

    // 用户数据交互部分
    switch(action.type){
        case type.INCREMENT:
           // 修改数据
           newState.count++
           break;
    }

    return newState

    
}

export default reducers