React状态管理器Rematch的使用

更新日期: 2022-09-09阅读: 1.1k标签: 管理

1. Rematch介绍

Rematch是没有样板文件的Redux的最佳实践,没有action types、 action creators, 状态转换或thunks。

2. Rematch特性

Redux 是一个了不起的状态管理工具,由良好的中间件生态系统和优秀的开发工具支持。Rematch 以 Redux 为基础,减少样板文件并强制执行最佳实践。

  • 小于 2kb 的大小
  • 无需配置
  • 减少 Redux 样板
  • react 开发工具支持
  • 支持动态添加reducer
  • Typesctipt支持
  • 允许创建多个store
  • 支持React Native
  • 可通过插件扩展

3. 基本使用

以一个计数器(count)应用为例子:

a. 定义模型(Model) Model集合了state、reducers、async actions,它是描述Redux store的一部分以及它是如何变化的,定义一个模型只需回答三个小问题:

- 如何初始化`state`? **state**
- 如何改变`state`? **reducers**
- 如何处理异步`actions`? **effect** with async/await
// ./models/countModel.js
export const count = {
  state: 0, // 初始化状态
  reducers: {
    // reducers中使用纯函数来处理状态的变化
    increment(state, payload) {
      return state = payload
    },
  },
  effects: dispatch => ({
    // effects中使用非纯函数处理状态变化
    // 使用async/await处理异步的actions
    async incrementAsync(payload, rootState) {
      await new Promise(resolve => setTimeout(resolve, 1000))
      dispatch.count.increment(payload)
    }
  })
}
// ./models/index.js
import { count } from './count'

export const models = {
  count
}

b. 初始化store 使用init方法初始化store, init是构建配置的Redux存储所需的唯一方法。init的其他参数可以访问api了解。

// store.js
import { init } from '@rematch/core'
import * as models from './models'

const store = init({models})

export default store

c. Dispatch actions 可以通过使用dispatch来改变你的store中的reducer和effects,而不需要使用action types 或 action creators; Dispatch可以直接被调用,也可以使用简写dispatch[model][action](payload)。

const { dispatch } = store
// state = { count: 0 }

// reducers
dispatch({ type: 'count/increment', payload: 1 }) // state = { count: 1 }
dispatch.count.increment(1) // state = { count: 2 }

// effects
dispatch({ type: 'count/incrementAsync', payload: 1 }) // 延时1秒后 state = { count: 3 }
dispatch.count.incrementAsync(1) // 延时1秒后 state = { count: 4 }

d. Rematch和Redux一起使用 Rematch可以和原生Redux集成一起使用,看下边这个例子:

// App.js
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 = (dispatch) => ({
    increment: () => dispatch.count.increment(1),
    incrementAsync: () => dispatch.count.incrementAsync(1),
})

const CountContainer = connect(
    mapState,
    mapDispatch
)(Count)

ReactDOM.render(
    <Provider store={store}>
        <CountContainer />
    </Provider>,
    document.getElementById('root')
)
作者:Ethan01
链接:https://juejin.cn/post/7140846955088838664

链接: https://www.fly63.com/article/detial/12104

程序员的思考:一年管理成富翁,三年市场路路通,十年技术一场空

程序员的思考:在中国,做技术的出路非常有限。首先做技术需要跟对老板,其次做技术的要和老板有共同的价值观,再有最最重要的是需要有一个好的身体。

IIS和ASP的标题广告管理系统的详细介绍与使用

标题广告是Web上最常见的广告形式。本文介绍了一个基于IIS和ASP的标题广告管理系统,该系统支持广告客户和广告的管理,能够随机选择广告并生成显示广告的HTML代码

缺这项能力,做不了技术管理工作

大部分开发者工作三五年后,都能掌握所在岗位必须的知识、经验和技能,然而很多人接下来就陷入困境,左冲右突,无法加薪升职,一直停在第1层,三年五年过去了,八年十年过去了,可能都还停在1层的位置。

到底什么才是后台?

我们整天说着前端,客户端,后台。到底什么才是后台?前台(前端)后台,在英语中即:Front-End,Back-End。广义上的前端包括客户端(PC、Android、IOS等),后台即通常意义上的Server。

团队管理上的一点思考

团队的成长离不开成员的成长,一个稳定的学习环境对于成员的成长有很大的帮助,也有不少的成员是以这样的心态在工作的,特别是还没有太多工作经验的毕业生。满足成员成长的需求,会让团队富有激情

JavaScript进度管理

我们写程序的时候会经常遇到显示进度的需求,如加载进度、上传进度等。最常见的实现方式是通过记录 已完成数量(loadedCount) 和 总数量(totalCount),然后算一下就能得到进度了。

brew 安装详解

MacOS上的包管理工具。类似RHEL/CentOS上的yum或者Ubuntu上的apt-get一样。 前置条件:brew是ruby开发的,需要确认ruby是否已安装,缺省状况下是已经安装的。默认不安装cask 有需要的可以替换

组织和管理CSS

在项目开发的过程中,基于有限的时间内保质保量的完成开发任务无疑是一场挑战。在这场挑战中我们不但要快速处理自己的问题,还需要与别人协同合作,以避免两者之间的冲突。

如何统一前端项目的 Node 版本和包管理器?

成员机器 Node.js 版本不统一: 守旧派用 12.x、保守用 14.x、激进用 17.x。项目能否正常跑起来全凭天意,在没有 CICD 流水线加持本地 npm run build 的场景下线上风险可想而知。

基于vue3的后台管理UI框架

​对于前端来说,想快速构建一个后台管理系统界面,首先需要选择js框架,然后就要选择相应的UI框架。基于Vue3的优秀表现和良好的生态这里我们选择Vue.js作为js框架。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!