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>
)
}
}