React中的状态管理器redux

要想在React中使用Redux,首先要在react中安装redux插件,npm i redux –save 或者用yarn add redux

为了便于调试react,在浏览器中我们安装了以下几个插件

这里写图片描述

请忽略vue

redux主要的操作流程,redux主要有三个概念,action ,reducer, store,

action:用来触发事件,

store存储状态,

reducer相当于管理者,用来处理action的方法,修改状态

下面是一个简单的小例子

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from "redux"

const reducer = function(state={cumputer:10},action){
console.log("管理员收到请求:",action)
//switch 就是响应别人的请求
switch(action.type){//判断action的类型
case"borrow1":
var newState = {}
newState.cumputer = state.cumputer
newState.cumputer--
return newState ; //{cumputer:9}
case"add1":
var newState={}
newState.cumputer = state.cumputer
newState.cumputer++
return newState
}
return state
}
const store = createStore(reducer)

console.log(store.getState()) //cumputer :10

//2、想借电脑1台 action ,需要派发请求 dispatch
const action = {type:"borrow1"}
store.dispatch(action)
console.log(store.getState())

class Boss extends React.Component {
state = {
number:store.getState().cumputer //把仓库的 数据传递到组件上
}
render(){
return <div>
<p>老板看到的电脑数据:{this.state.number}</p>
</div>
}
componentDidMount(){
store.subscribe(()=>{
//监听,数据改变
//获取最新的数据显示
this.setState({
number:store.getState().cumputer
})
})
}
}


class Box extends React.Component {
render(){
return (
<div>
<button onClick={()=>this.handleClick()}>借电脑1台</button>
<button onClick={()=>this.AddClick()}>买电脑1台</button>
</div>
)
}
handleClick(){
//派发请求
const action = {type:"borrow1"}
store.dispatch(action)
}
AddClick(){
const add = {type:"add1"}
store.dispatch(add)
}
}

ReactDOM.render(<div>
<Boss />
<Box />
</div> ,document.getElementById("root"))
阅读更多
个人分类: React
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭