react之redux全局状态管理

npm install redux --save-dev

项目目录

srcstoreaction.jsreducer.jsstate.jsstore.jsApp.jscomponentsson.js

APP.js

import React, { Component } from 'react';
import Son from './components/son';
import store from './store/store'
import action from './store/action'
class App extends Component {constructor(props){super(props)this.state={...store.getState()}//解构全局状态值}componentWillMount(){//store.subscribe(()=>{//this.setState({});//})}add(){action.change(++this.state.value);//用户触发action中的方法this.setState({})//或者采用上面注释的方法}render() {return(<div>{this.state.value}<br/>{store.getState().value}<br/><Son value={this.add.bind(this)}></Son></div>)}
}export default App;

son.js

import React, { Component } from 'react';class Son extends Component {render() {return(<button onClick={()=>{this.props.value()}}>增加</button>)}
}export default Son;

store.js

import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)  //创建全局状态对象
export default store

reducer.js
修改全局状态值
通过reducer来修改全局状态

import state from './state'
export default (prevdata=state,action)=>{let newData = {...prevdata};let type = action.type;switch(type){case 'CHANGE_VALUE':newData.value = action.valuebreak;}return newData
}

state.js
创建全局状态值

export default {value : 1
}

action.js
将其抛出到view,让用户来做触发action的方法来触发reducer.js

import store from './store'
export default {change(value){var data = {type : 'CHANGE_VALUE',value}store.dispatch(data)}
}

react之redux全局状态管理相关推荐

react - redux 全局状态管理、多组件共享状态 - 例子有详细注释
react全局状态管理基本概念下面开始小例子需要用到的插件redux 代码 - 代码中有详细的注释参考阮一峰的网络日志先来看一下Redux的流程图基本概念 Store: 保存数据的地方, ...
【react】 redux 公共状态管理---数据的渲染，数据的修改，再把修改的数据渲染到当前组件...
核心概念三大原则 1.单一数据源使用redux的程序,所有的state都存储在一个单一的数据源store内部,类似一个巨大的对象树.state是只读的state是只读的,能改变state的唯一方式是 ...
小程序全局状态管理，在页面中获取globalData和使用globalSetData
GitHub: https://github.com/WozHuang/mp-extend 主要目标微信小程序官方没有提供类似vuex.redux全局状态管理的解决方案,但是在一个完整的项目中各组件 ...
react全局状态管理_rxv: 在React中用Vue3的reactivity包实现状态管理。
前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,react-easy-state,在hooks ...
react获取全局_使用react hooks实现的简单全局状态管理
注意,此代码存储库已被弃用,不会再更新维护了. Note that this code repository has been deprecated and will not be updated a ...
React 全局状态管理的 3 种底层机制
现代前端框架都是基于组件的方式来开发页面.按照逻辑关系把页面划分为不同的组件,分别开发不同的组件,然后把它们一层层组装起来,把根组件传入 ReactDOM.render 或者 vue 的 $mount ...
[react] 什么时候使用状态管理器？
[react] 什么时候使用状态管理器? 1用户的使用方式复杂 2.不同身份的用户有不同的使用方式(比如普通用户和管理员) 3.多个用户之间可以协作 4.与服务器大量交互,或者使用了WebSocket ...
微信小程序API的Promise化及全局状态管理MobX
文章目录 API的Promise化创建promise化的对象全局状态管理创建页面中绑定页面中使用组件中绑定组件中使用 API的Promise化默认情况下小程序官方提供的API都是基于回 ...
状态管理 - 全局状态管理工具
文章目录一.单向数据流 1. 理念示意图 2. 简述二.什么是全局状态管理模式三.重点概念 3.1. 什么是全局状态管理模式? 3.2.全局状态管理工具? 3.3. 什么是 vuex 四.在项目 ...

react之redux全局状态管理

react之redux全局状态管理相关推荐

最新文章

热门文章