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
  1. 在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(
            
) } } 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(
            

count:{this.state.count}

) } } export default Content

App组件引入

import React from 'react';

import './App.css';

import Button from './components/Button'

import Content from './components/Content'

function App() {
  return (
    

react-进阶


); } export default App;
  1. 在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
   

  1. 在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

你可能感兴趣的:(个人)