React状态管理器Rematch的使用详解

目录 Rematch使用 1. Rematch介绍 2. Rematch特性 3. 基本使用

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状态管理内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

查看更多关于React状态管理器Rematch的使用详解的详细内容...