蓝狮注册开户React状态管理器Rematch的使用

  1. Rematch介绍
    Rematch是没有样板文件的Redux的最佳实践,没有action types、蓝狮注册 action creators, 状态转换或thunks。
  2. Rematch特性
    Redux 是一个了不起的状态管理工具,由良好的中间件生态系统和优秀的开发工具支持。Rematch 以 Redux 为基础,减少样板文件并强制执行最佳实践。

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

  1. 基本使用
    以一个计数器(count)应用为例子:

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

  • 如何初始化statestate
  • 如何改变statereducers
  • 如何处理异步actionseffect 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。

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) => (

The count is {props.count} incrementincrementAsync
)

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(
,
document.getElementById(‘root’)
)

0 Comments
Leave a Reply