React狀態(tài)管理器Rematch的使用詳解

更新時間：2022年09月08日 15:37:52 作者：Ethan01

rematch是對redux的二次封裝，簡化了redux是使用，極大的提高了開發(fā)體驗，這篇文章主要介紹了React狀態(tài)管理器Rematch的使用,需要的朋友可以參考下

Rematch使用

1. `Rematch`介紹

Rematch是沒有樣板文件的Redux的最佳實踐，沒有action types、 action creators, 狀態(tài)轉(zhuǎn)換或thunks。

2. `Rematch`特性

Redux 是一個了不起的狀態(tài)管理工具，由良好的中間件生態(tài)系統(tǒng)和優(yōu)秀的開發(fā)工具支持。Rematch 以 Redux 為基礎(chǔ)，減少樣板文件并強制執(zhí)行最佳實踐。

小于 2kb 的大小
無需配置
減少 Redux 樣板
React 開發(fā)工具支持
支持動態(tài)添加reducer
Typesctipt支持
允許創(chuàng)建多個store
支持React Native
可通過插件擴展

3. 基本使用

以一個計數(shù)器(count)應(yīng)用為例子：

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, // 初始化狀態(tài)
  reducers: {
    // reducers中使用純函數(shù)來處理狀態(tài)的變化
    increment(state, payload) {
      return state = payload
    },
  },
  effects: dispatch => ({
    // effects中使用非純函數(shù)處理狀態(tài)變化
    // 使用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是構(gòu)建配置的Redux存儲所需的唯一方法。init的其他參數(shù)可以訪問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可以直接被調(diào)用，也可以使用簡寫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')
)

到此這篇關(guān)于React狀態(tài)管理器Rematch的使用的文章就介紹到這了,更多相關(guān)React狀態(tài)管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: