redux的入门学习 分离

本文探讨了在Redux应用中,通过统一管理action.type、分离action和reducer以及拆分store来优化状态管理的过程。介绍了如何创建独立的action文件夹和reducer文件夹,以及如何修改组件以调用新分离的action,从而提高代码的可维护性和一致性。
摘要由CSDN通过智能技术生成

1:分离   下面的 "add"  是常量  没有统一管理    99个人用的时候 都要是 add  如果第100个人把 add 改成了 +号    之前的99个人的功能就会出现问题

         所以我们需要对action.type进行统一管理

 switch(action.type){
        case  "add":
            return  {num:state.num+action.num}
        case  "reduce":
            return  {num:state.num-action.num}
    }
  第二个页面 做加法 <button onClick={
                   ()=>{
                       store.dispatch({
                           type:"+",
                           num:2
                       })
                   }
               }>+</button>

  第三个页面 做减法 <button onClick={()=>{
                    store.dispatch({
                        type:"reduce",
                        num:5
                    })
                }}>-</button>

dispatch里面的传的是一个对象  type改成了"+"  那么对应的    reducer中 也要改成 "+"   并且  对象作为参数   有没有对象的声明  也不清楚 dispatch到底要做什么

所以我们对dispatch中的对象也要进行分离

let  numReducer =(state={num:10},action)=>{
    switch(action.type){
        case  "add":
            return  {num:state.num+action.num}
        case  "reduce":
            return  {num:state.num-action.num}
    }

    return  state;
}
export default  createStore(numReducer);

store是唯一的  但是store里面数据是很多的  把所有的数据都写在一个state中不好  把不同的state也拆分出来

所以reducer也需要进行拆分

现在我们开始分离   新建文件夹  action    action中新建  index.js和 numAction      reducer 中新建 numReducer 

action/index.js中

export  default {
    "ADD":"ADD",
    "REDUCE":"REDUCE"
}

action/numAction中

import   actionType from  "./index"

let add=(playload)=>{
    return  {
        type:actionType.ADD,
        playload
    }
}
let reduce =(playload)=>{
    return  {
        type:actionType.REDUCE,
        playload
    }
}
export {
    add,reduce
}

numReducer.js中

import   actionType from  "../action";

export  default  (state={num:10},action)=>{

    switch(action.type){
        case   actionType.ADD:
            return  {num:state.num+action.playload}
        case   actionType.REDUCE:
            return   {num:state.num-action.playload}
    }
    return  state;
}

store/index.js中

import  {createStore} from  "redux"
import  numReducer from "../reducer/numReducer"
export default  createStore(numReducer);

再去加法和减法操作的页面 修改调用

import React, { Component } from 'react'
import  store from  "../store"
import   {add} from  "../action/numAction"

export default class Menu2 extends Component {
    render() {
        return (
            <div>
               第二个页面 做加法 <button onClick={
                   ()=>{
                       store.dispatch(add(4))
                   }
               }>+</button>
            </div>
        )
    }
}
import React, { Component } from 'react'
import  store  from  "../store"
import   {reduce} from  "../action/numAction"


export default class Menu3 extends Component {
    render() {
        return (
            <div>
                第三个页面 做减法 <button onClick={()=>{
                    store.dispatch(reduce(1))
                }}>-</button>
            </div>
        )
    }
}


 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值