React中的状态管理器redux

8人阅读 评论(0) 收藏 举报
分类:

要想在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之第三章:使用redux管理应用状态

Redux在前面,我们已经介绍了完全使用react来管理应用数据的麻烦,下面我们将要介绍redux这种管理应用状态的框架。 1. Reduxredux的三大基本原则: 唯一数据源 保持状态只读 数据...
  • qq_26708777
  • qq_26708777
  • 2017-10-09 00:34:53
  • 399

React和Redux的状态处理

我们知道react中state是组件更新的唯一指标,并且只能通过组件的this.setState方法触发组件的重新渲染。这种形式导致了一个组件A想要触发另一个组件B更新,就必须触发组件B内部的this...
  • github_34117641
  • github_34117641
  • 2017-12-20 15:26:17
  • 108

深入浅出React和Redux ,程墨

  • 2018年04月20日 23:23
  • 88.02MB
  • 下载

Redux状态管理 3.处理异步、更优雅的和react相结合

Redux状态管理3 处理异步、调试工具、更优雅的和react相结合 Redux处理异步,需要redux-thunk插件 使用react-redux优雅的链接react和redux Redux默认只处...
  • m0_37068028
  • m0_37068028
  • 2017-12-09 13:06:30
  • 104

react状态管理的思考

redux是一个状态管理的工具,使用它本来就是为了管理公共状态的,组件A发生的变化影响了组件BCD,那么这个场景下使用很方便,但是,如果组件A的变化只是影响他本身,那么还是使用react,把这个状态直...
  • zhanglongdream
  • zhanglongdream
  • 2017-05-07 21:25:19
  • 884

React 状态管理库: Mobx

原文地址:https://segmentfault.com/a/1190000010084073 React 是一个专注于视图层的库。React 维护了状态到视图的映射关系,开发者只需关心状态即...
  • jiangfei009003
  • jiangfei009003
  • 2017-08-13 13:56:34
  • 578

React ---- 状态管理之React-Redux

react-redux 基于redux开发的针对react一个状态管理包,要用到redux
  • u014066964
  • u014066964
  • 2017-09-18 14:41:22
  • 264

React学习笔记--通过Redux 的三个基本原则来理解Redux

澄清一个事实严格的说来,Redux属于一种编程思想,类似于Flux,但是不同于Flux, Redux中并没有 dispatcher 的概念。事实上Redux 和 React 之间没有任何直接的关系。R...
  • shenlei19911210
  • shenlei19911210
  • 2016-09-27 13:50:10
  • 1952

React和Redux

  • 2018年01月09日 10:33
  • 36.03MB
  • 下载

浅入react-native使用redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 初学这个,觉得网上有些文章并不那么容易看懂,这里用浅白的话简单介绍一下Redux在react-native的使用。 说白了就三...
  • qq_29623203
  • qq_29623203
  • 2016-09-30 15:08:16
  • 3469
    个人资料
    持之以恒
    等级:
    访问量: 3183
    积分: 676
    排名: 7万+
    文章存档