react进行状态管理的几种方式
redux
最基础的就是使用 redux 来处理
这里是展示组件结构
import { connect } from 'react-redux'
import { valueAdd, valueReduce } from './redux/action'class Main extends Component {render () {return (<div className="App"><header className="App-header"><p onClick={() => this.props.valueAdd()} > 点击 + 1 </p><p onClick={() => this.props.valueReduce()} > 点击 - 1 </p><div> i am {this.props.number} </div></header></div>)}
const MainBox = connect((state) => { return { number: state.number }},dispatch => {return {addNumber: () => { dispatch(valueAdd()) },reduceNumber: () => { dispatch(valueReduce()) }}}
)(Main)
export default MainBox
复制代码
借助 bindActionCreators 调整一下
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as action from './redux/action'@connect(({number}) => ({number}),dispatch => bindActionCreators(action, dispatch)
)
class Main extends Component {render () {return (<div className="App"><header className="App-header"><p onClick={() => this.props.valueAdd()} > 点击 + 1 </p><p onClick={() => this.props.valueReduce()} > 点击 - 1 </p><div> i am {this.props.number} </div></header></div>)}
}
export default Main
复制代码
redux-saga
文档阅读
常用API
方法 | 建议 |
---|---|
takeEvery | 监听派发的动作,如果action type匹配的话,会执行对应的函数 |
put | 派发Action, 可以理解成为redux中的dispatch函数 |
call | 调用函数执行,阻塞 |
fork | 调用函数执行,不会阻塞 |
使用方式
对比于 redux,使用saga的时候只需要调整一下store的生成
import { applyMiddleware, createStore } from 'redux';
import createSagaMiddleware from "redux-saga";
import rootSaga from "./saga" //引入rootSaga
import reducer from './reducer'
let sagaMiddleware = createSagaMiddleware()export const store = createStore(reducer,applyMiddleware(sagaMiddleware),
);
sagaMiddleware.run(rootSaga); // 开始执行rootSaga
复制代码
添加一个 saga 文件
function * add () {// 派发Actionyield put({ type: ACTION_ADD })
}function * reduce () {yield put({type: ACTION_REDUCER})
}function * watchAdd() {// 监听派发给仓库的动作,如果动作类型匹配的话,会执行对应的监听生成器yield takeEvery(ACTION_ADD_SAGA, add)yield takeEvery(ACTION_REDUCER_SAGA, reduce)
}export default function * rootSaga() {yield watchAdd()
}
复制代码
saga 有三种,做工作的 进行监听的 以及 rootsage
1 worker saga 做具体的工作,如调用API,进行异步请求,获取异步封装结果
2 watcher saga 监听被dispatch的actions,当接受到action或者知道其被触发时,调用worker执行任务
3 root saga 启动saga的唯一入口
dva
dva 可以视为内部封装了redux-saga
安装
npm install -g dva-cli
复制代码
使用dva生成项目
dva new xxxname
复制代码
dva 项目结构
dva 的文件结构命名有点奇怪, 比如这个 routes 文件夹 其实不是路由处理,里面是组件,(与该路由对应的组件)
models 则是将 action reducer action_type 编写到一起了
入口文件 index.js
在index.js 实现一些配置 比如 定义默认state 添加中间件 引入model=
import dva from 'dva';
import {createLogger} from 'redux-logger';
// 1. Initialize
const app = dva({});// 2. Plugins
// app.use({});// 3. Model
app.model(require('./models/main').default);
app.model(require('./models/users').default);// 4. Router
app.router(require('./router').default);// 5. Start
app.start('#root');
复制代码
可以设置的全部属性参数为
const app = dva({history, // 路由控制 initialState, // 基础state 优先级高于 model 中的 stateonError, // effect 执行错误或 subscription 通过 done 主动抛错时触发,可用于管理全局出错状态onAction, // 在action被dispatch时触发,用于注册 redux 中间件。支持函数或函数数组格式onStateChange, // 顾名思义,在state变动的时候触发onReducer,onEffect,onHmr,extraReducers,extraEnhancers,
})
复制代码
- app.use
可以添加中间件
- app.model
所有的model都要通过这个方法挂载到app
- app.router
挂载定义的路由
- app.start
启动app
核心部分 models
export defult {namespace: '',state: '',reducers: {},effects: {},subscriptions: {}
}
复制代码
key | 含义 |
---|---|
namespace | model 的命名空间,是在全局 state 上的属性 |
state | state 初始值 |
reducers | 唯一可以修改 state 的地方,由 action 触发 |
effects | 用于处理异步操作和业务逻辑,不直接修改 state。由action 触发, |
subscriptions | 用于订阅一个数据源,然后根据需要 dispatch 相应的 action |
感觉如果项目决定使用 redux-saga 可以考虑直接使用 dva
umi 呜咪
(和喵喵并没有什么关系)
npm i -g umi
复制代码
创建文件
mkdir project && cd project && yarn create umi && cnpm i
复制代码
这个没什么好说的,就一个项目创建脚手架,可以包含测试 编译 部署等流程 就像使用种组装了一辆汽车 而用户来选择需不需要加车窗 轮子等部件
参考文章
dav 基本使用
saga 原理
react进行状态管理的几种方式相关推荐
- React 全局状态管理的 3 种底层机制
现代前端框架都是基于组件的方式来开发页面.按照逻辑关系把页面划分为不同的组件,分别开发不同的组件,然后把它们一层层组装起来,把根组件传入 ReactDOM.render 或者 vue 的 $mount ...
- react中数据状态管理的四种方案
我们为什么需要状态管理? (1) 一个是为了解决相邻组件的通信问题. 虽然可以通过「状态提升」解决,但有两个问题: 每次子组件更新,都会触发负责下发状态的父组件的整体更新(使用 Context 也有这 ...
- React/ReactNative 状态管理终于懂了!redux redux-toolkit 与 rematch 对比总结
有同学反馈开发 ReactNative 应用时状态管理不是很明白,这个问题我之前刚接触 React 时也遇到过,看了好多文章和视频才终于明白,不得不说,React 及三方库这方面做的有点过于复杂了! ...
- react全局状态管理_rxv: 在React中用Vue3的reactivity包实现状态管理。
前言 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的redux,有mutable阵营的mobx,react-easy-state,在hooks ...
- Recoil 是 React 的状态管理库
Recoil 是 React 的状态管理库,因此你需要将 Recoil 安装到 React 项目中才能使用.创建 React 项目最方便且推荐的方式是使用 Create React App: npx ...
- 【视频】React ReduxToolkit状态管理:创建store对象及redux调试工具的安装方法
React ReduxToolkit状态管理:创建store
- 技术改进绩效管理的5种方式
技术改进绩效管理的 5 种方式 技术改进绩效管理的 5 种方式 最好的组织会设计一个独特地适合其员工的绩效管理系统.从设定目标到持续反馈,从绩效数据到年度审查,从一家公司到另一家公司,没有两个流程看起 ...
- 041组件传值与状态管理绑定的实现方式
041组件传值与状态管理绑定的实现方式 从主结构页面中向下传状态管理的值 // 引入Pinia的状态管理模块 import storeModel from './stores/model';// 定义 ...
- Git 分支管理常见三种方式
Git 分支管理常见三种方式 TBD(Trunk-based development.单主干) GitHub flow git-flow 1. TBD 所有团队成员都在单个主干分支上进行开发. 发布时 ...
- React中组件通信的几种方式
首次发表在个人博客 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件 ...
最新文章
- php增删改查心得体会,php增删改查入门示例
- 算法系列之住酒店最少天数问题
- window7调用计算机,Windows7自带计算器的使用
- FPGA实现数字信号处理的定点运算
- Python高手必读,做一个精通规则的玩家
- 英语语法---名词详解
- consulAPI服务的注册源码
- [滤镜]的firefox兼容问题
- 知名IT公司的年度大会合集
- tomcat7 IP限制配置
- 多线程 + java nio 实现按行读取并处理超大文件
- php网站开发实例教程源码,PHP+MYSQL网站开发全程实例
- 网络安全术语基础知识
- 在页眉插入横线或下划线
- 磁带存储发展趋势浅析
- C++ 对OPENCV rect矩形进行颜色填充
- 【特异性双端队列 | 最小调整顺序次数】
- SylixOS 经得起检验的国产操作系统 (一)
- 号外丨边缘计算社区品牌升级!
- IOS捷径、微信技巧、玩机巧计交流群
热门文章
- 利用DELL的OMSA监控服务器的温度
- C++字符串可以这样用!
- 海量数据库解决方案2011040701
- Returning array from function in C
- JS之形参带默认值的写法代码
- idea添加自动编译
- 2017-2018-1 20179202《Linux内核原理与分析》第四周作业
- 去蓝港在线面试Unity3D的笔试题。难吗?知道答案的在评论里写出来分享
- Lua的多任务机制——协程(coroutine)
- 遍历~筛选~eq();filter();first();last();has();is();map();slice()