React状态管理器Rematch的使用详解
作者:Ethan01
rematch是对redux的二次封装,简化了redux是使用,极大的提高了开发体验,这篇文章主要介绍了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 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') )
到此这篇关于React状态管理器Rematch的使用的文章就介绍到这了,更多相关React状态管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!