rematch简单使用

import {init,dispatch} from 'rematch/core';

const count = {

state:{

number:0

reducers:{//一个改变该model state的所有函数的对象

increments:(state,payload) => state.number + payload,

decrements:(state,payload) => state.number - payload,

effects:{//方法都写在这里

async asyncIncrements(payload){//异步增加

await this.increments(payload);

async asyncDecrements(payload){

await this.decrements(payload);

}

const store = init({

models:{count},

redux:{}

})

dispatch.count.asyncIncrements(10);//异步增加10

dispatch.count.asyncDecrements(10);//异步减少10

使用：

import React from 'react'

import {connect} from 'react-redux'

class App extends Component{

addCount = (value)=>{//异步增加数据

const { CountDispatch } = this.props;

CountDispatch.asyncIncrements(value);

}

cutCount = (value) =>{//异步减少数据

const {CountDispatch} = this.props;

CountDispatch.asyncIncrements(value);

}

render(){

let {CountNumbers} = this.props;

return (

<div>

<p>获取count数据中的number变化：{CountNumbers.number}</p>

</div>

)

}

const mapStateToProps =(state)=>{

CountNumbers:state.count,//获取count数据

}

const mapDispatchToProps=(dispatch)=>{

CountDispatch:dispatch.count,//获取count方法

}

export default connect(mapStateToProps,mapDispatchToProps)(App)

rematch简单使用相关推荐

HTML5超简单的日期时间控件
HTML5超简单的日期时间控件时间都是宝贵的,尤其是开发人员,所以为了节省时间,我直接展示下效果,符合您的要求就采纳,不符合,就不用继续看了! 1.1 日期控件效果: 1.2 时间控件展示: 2.1 ...
rematch常用插件介绍
插件系统 rematch实现了一个插件系统,内置了dispatch和effects两个插件,分别用来增强dispatch和处理异步操作.rematch的插件,要符合rematch的要求,每个插件返回一 ...
React/ReactNative 状态管理: rematch 如何使用
有同学反馈开发 ReactNative 应用时状态管理不是很明白,接下来几篇文章我们来对比下 React 及 ReactNative 状态管理常用的几种框架的使用和优缺点. 上一篇文章介绍了 redu ...
React/ReactNative 状态管理终于懂了！redux redux-toolkit 与 rematch 对比总结
有同学反馈开发 ReactNative 应用时状态管理不是很明白,这个问题我之前刚接触 React 时也遇到过,看了好多文章和视频才终于明白,不得不说,React 及三方库这方面做的有点过于复杂了! ...
rematch：当你受不了redux繁琐写法的时候，是时候了解一波rematch了
前言: 前段时间学习完react后,刚好就接到公司一个react项目的迭代,顺便巩固一下前段时间的学习成果.项目使用的是redux+react-router,将所有的数据都放在redux中,异步处理数 ...
Rematch: 重新设计 Redux
本文是借助网易见外的工具帮助完成翻译的,网易见外是基于NMT(神经网络机器翻译)技术的海外内容智能聚合平台原文地址: https://hackernoon.com/redesigning-redux ...
react数据集中式管理第四篇--@rematch/core
今天,我们来介绍@rematch/core 其他几篇: react数据集中式管理第一篇–Redux初认识 react数据集中式管理第二篇–@reduxjs/toolkit react数据集中式管理第三 ...
Rematch是没有样板的Redux最佳实践
Rematch官网使用Rematch可以使全局状态管理更加的简单和方便这里只做基本使用介绍,具体可查阅官网这里的使用是在react hooks组件中一.安装rematch npm instal ...
在docker上安装部署tomcat项目超简单，拿来主义
在docker中部署tomcat,非常简单,而且省去了手动安装jdk等步骤,只需要将war包复制在容器tomcat实例中的webapps下面即可.以下将详细讲解流程: 在windows中打好包以后用w ...
Linux下tomcat的安装与卸载以及配置（超简单）
无敌简单的几步 1.安装 //首先你需要下载好tomcat包 sudo tar -xvzf apache-tomcat-7.0.85.tar.gz(这里是包名) -C 你要放的位置 2.卸载 rm - ...

rematch简单使用

rematch简单使用相关推荐

最新文章

热门文章