React状态管理器Rematch的使用详解
Rematch使用
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 storec. 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')
)
到此这篇关于React状态管理器Rematch的使用的文章就介绍到这了,更多相关React状态管理内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
