Redux 数据分片

分析 一个项目：

banenrhomemineloginregisterdetailshopcar会员普通用户数据

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

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

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

store home state.jstype.jsreducer.jsactionCreator.js我们需要一个统一的redcuer的管理者

操作步骤：

新建redux项目 安装redux npx create-react-app redux_advance yarn add redux 在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; 在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 在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