rematch

https://github.com/rematch/rematch#examples

数据模型一个文件定义, 不用分散到 action actiontype reducer 文件

export const count = {
state: 0, // initial state
reducers: {
// handle state changes with pure functions
increment(state, payload) {
return state + payload
}
},
effects: (dispatch) => ({
// handle state changes with impure functions.
// use async/await for async actions
async incrementAsync(payload, rootState) {
await new Promise(resolve => setTimeout(resolve, 1000))
dispatch.count.increment(payload)
}
})
}

状态定义

import { init } from '@rematch/core'
import * as models from './models' const store = init({
models,
}) export default store

view使用不变

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider, connect } from 'react-redux'
import store from './store' const Count = props => (
<div>
The count is {props.count}
<button onClick={props.increment}>increment</button>
<button onClick={props.incrementAsync}>incrementAsync</button>
</div>
) const mapState = state => ({
count: state.count
}) const mapDispatch = ({ count: { increment, incrementAsync }}) => ({
increment: () => increment(1),
incrementAsync: () => incrementAsync(1)
}) const CountContainer = connect(mapState, mapDispatch)(Count) ReactDOM.render(
<Provider store={store}>
<CountContainer />
</Provider>,
document.getElementById('root')
)

dva

Lightweight front-end framework based on redux, redux-saga and react-router. (Inspired by elm and choo)

https://github.com/dvajs/dva

import React from 'react';
import dva, { connect } from 'dva';
import './style.css'; // 1. Initialize
const app = dva(); console.log(2); // 2. Model
app.model({
namespace: 'count',
state: 0,
reducers: {
add (count) { return count + 1 },
minus(count) { return count - 1 },
},
}); class TestError extends React.Component {
componentDidCatch(e) {
alert(e.message);
}
componentDidMount() {
// throw new Error('a');
}
render() {
return <div>TestError</div>
}
} // 3. View
const App = connect(({ count }) => ({
count
}))(function(props) {
return (
<div>
<TestError />
<h2>{ props.count }</h2>
<button key="add" onClick={() => { props.dispatch({type: 'count/add'})}}>+</button>
<button key="minus" onClick={() => { props.dispatch({type: 'count/minus'})}}>-</button>
</div>
);
}); // 4. Router
app.router(() => <App />); // 5. Start
app.start('#root');

Redux counterpart rematch dva的更多相关文章

  1. redux和dva

    实习的时候,公司使用的是react,react说实话生态学的还不是很完善,就暂时先不做跟react相关的博客,等以后学好了react全家桶之后,专门再总结一下react的内容 这两天看了公司的alit ...

  2. React dva 的使用

    各大传送门: DvaJS Github DvaJS API与示例 了解 dva- dva = React-Router + Redux + Redux-saga + fetch - dva的初衷是(其 ...

  3. dva框架使用详解及Demo教程

    dva框架的使用详解及Demo教程 在前段时间,我们也学习讲解过Redux框架的基本使用,但是有很多同学在交流群里给我的反馈信息说,redux框架理解上有难度,看了之后还是一脸懵逼不知道如何下手,很多 ...

  4. redux-saga框架使用详解及Demo教程

    redux-saga框架使用详解及Demo教程 前面我们讲解过redux框架和dva框架的基本使用,因为dva框架中effects模块设计到了redux-saga中的知识点,可能有的同学们会用dva框 ...

  5. JS构建多端应用

    JS构建多端应用 一,需求与介绍 1.1,介绍 1,Taro 是一套遵循 React语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大 ...

  6. react 前端项目技术选型、开发工具、周边生态

    react 前端项目技术选型.开发工具.周边生态 声明:这不是一篇介绍 React 基础知识的文章,需要熟悉 React 相关知识 主架构:react, react-router, redux, re ...

  7. Taro_Mall 是一款多端开源在线商城小程序.

    介绍 Taro_Mall是一款多端开源在线商城应用程序,后台是基于litemall基础上进行开发,前端采用Taro框架编写,现已全部完成小程序和h5移动端,后续会对APP,淘宝,头条,百度小程序进行适 ...

  8. rematch:当你受不了redux繁琐写法的时候,是时候了解一波rematch了

    前言: 前段时间学习完react后,刚好就接到公司一个react项目的迭代,顺便巩固一下前段时间的学习成果.项目使用的是redux+react-router,将所有的数据都放在redux中,异步处理数 ...

  9. Vuex、Flux、Redux、Redux-saga、Dva、MobX

    https://www.jqhtml.com/23003.html 这篇文章试着聊明白这一堆看起来挺复杂的东西.在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎. 不管是Vue,还是 Reac ...

随机推荐

  1. zabbix--告警消息内容更改

    zabbix 告警消息内容更改 自带的消息内容模板发送出来的消息着实有点丑陋,再加之是英文,这就让我有点尴尬了. 如下默认的消息内容: 更改过后的效果: 操作步骤 编辑默认的Report proble ...

  2. 别名alias永久生效别名alias永久生效;虚拟机的NAT模式,进行静态IP配置,并A、B的实现免密访问

    别名alias永久生效 1.打开cd /etc/profile.d 目录 新建文件my_alias.sh 2.my_alias.sh里面添加 alias p=’poweroff -h’ alias r ...

  3. 关于Classloader(学习笔记)

    1)类加载的过程是怎么样的?①加载:根据具体需求,选择合适的加载器(Bootstrap ClassLoader不可直接获取.Extension ClassLoader.系统.自定义)来控制字节流的获取 ...

  4. Markdown插入图表

    链接:https://www.jianshu.com/p/3cf83d22dd3d Markdown图表语法 本文介绍如何用Markdown的mermaid等语法插入时序图.流程图.甘特图 如果是想学 ...

  5. 开发(三)ESP32 硬件配置

    https://github.com/espressif/arduino-esp32

  6. K-string HDU - 4641 (后缀自动机)

    K-string \[ Time Limit: 2000 ms\quad Memory Limit: 131072 kB \] 题意 给出长度为 \(n\) 的字符串,接下来跟着 \(m\) 次操作, ...

  7. LeetCode 301. Remove Invalid Parentheses

    原题链接在这里:https://leetcode.com/problems/remove-invalid-parentheses/ 题目: Remove the minimum number of i ...

  8. 文件夹上传插件webupload插件

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  9. Hibernate的级联保存、级联删除

    级联操作: 属性:cascade 值:save-update(级联保存) delete(级联删除) all(级联保存+级联删除) 优点:虽然,不用级联操作也能解决问题.但是级联操作可以减少代码量,使得 ...

  10. 云上的三台主机构建server-proxy-agent取不到数据

    4252:20191126:172327.217 cannot send list of active checks to "xxx.190.39.152": host [ppp] ...