@rematch/core API

import { init, dispatch, getState } from '@rematch/core'

init

init(config)
该函数被调用去设置Rematch。返回store
import { init } from '@rematch/core'
const store = init()
Init也可以通过下面的配置选项来调用。

models

init({ models: { [string]: model } })
import { init } from '@rematch/core'
const count = {
state: 0,
}
init({
models: {
count
}
})
对于较小的项目,建议你保存model在一个“models.js”文件中并且命名导出他们。
export const count = {
state: 0,
}
对于较大的项目,建议你保存model在一个“models”文件夹中并且导出他们。
// models/count.js
export default {
state: 0,
}
// models/index.js
export { default as count } from './count'
export { default as settings } from './settings'
这些可以使用* as alias语法导入。
import { init } from '@rematch/core'
import * as models from './models'
init({ models })
state
state: any Required
该model的初始state
const example = {
state: { loading: false }
}
reducers
reducers: { [string]: (state, payload) => any }
一个改变该model state的所有函数的对象。这些函数采用model的上一次state和一个payload作为形参,并且返回model的下一个装态。这些应该是仅依赖于state和payload参数来计算下一个state的纯函数。对于依赖“outside world”的代码(不纯的函数,如API调用等)的代码,请使用 effects。
{
reducers: {
add: (state, payload) => state + payload,
}
}
通过列出'model名字' + 'action名字'来作为key,Reducers也可以监听来自于其它model的action。
{
reducers: {
'otherModel/actionName': (state, payload) => state + payload,
}
}
effects
effects: { [string]: (payload, rootState) }
一个可以处理该model world outside功能(所有函数)的对象。
{
effects: {
logState(payload, rootState) {
console.log(rootState)
}
}
}
当与async/await一起使用时,Effects提供了一种处理异步action的简单方法。
{
effects: {
async loadData(payload, rootState) {
// wait for data to load
const response = await fetch('http://example.com/data')
const data = await response.json()
// pass the result to a local reducer
dispatch.example.update(data)
}
}
}

plugins

init({
plugins: [loadingPlugin, persistPlugin],
})
Plugins 用来自定义init配置或内部hooks,它能添加功能到你的Rematch设置当中来。
阅读更多关于现有的插件或关于如何使用plugins API创建你自己的插件。

redux

init({
redux: {
middlewares: [reduxLogger],
reducers: {
someReducer: (state, action) => ...,
}
},
})
有些情况下您可能想要直接访问Redux。 您可能想要:
  • 迁移现有的Redux项目
  • 添加中间件
  • 创建一个自定义插件
有关所有redux选项的完整摘要,请参阅init Redux API

store

store.dispatch

在Redux中,一个分派action的函数。
在Rematch中,store.dispatch能被直接调用或者作为一个对象。
import store from './index'
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 }) // state = { count: 3 } after delay
dispatch.count.incrementAsync(1) // state = { count: 4 } after delay

store.getState

在Redux中,返回该store的state。

store.name

为您的store提供一个名称。
当使用多个store时使用它。当全局getState被调用时这个名字将变成key。

store.model

在调用init之后,可以延迟加载model并将它们合并到Rematch中。 使用store.model
import { init } from '@rematch/core'
const store = init({
models: {
count: { state: 0 }
}
})
store.getState()
// { count: 0 }
// later on
store.model({ name: 'countB', state: 99 })
store.getState()
// { count: 0, countB: state: 99 }

dispatch

dispatch(action, meta)
所有store中,Dispatch 发送并触发action。
dispatch.modelName.actionName(any)
在Rematch中,使用上面的简写更常见,它将为您创建和构造一个action。
Dispatch 可以在应用程序中的任何地方被调用,但建议使用store.dispatch代替。
import { dispatch } from '@rematch/core'
dispatch.cart.addToCart(item)
Dispatch具有可选的第二个属性“meta”,它可以用于 subscriptions 或 middleware。 这仅适用于高级用例。
dispatch.cart.addToCart(item, { syncWithServer: true })

action

{ type: 'modelName/actionName', payload: any }
Action是在Redux中发送的消息,作为应用程序的不同部分传递状态更新的一种方式。
在Rematch中,一个action始终是一个“model名称”和“action名称”类型的结构 - 指的是一个reducer或effect名称。
任何附加到action的数据都会添加到payload中。

getState

getState(): { [storeName]: state }
返回一个包含所有store state的对象。
import { init, getState } from '@rematch/core'
const firstStore = init({
name: 'first',
models: { count: { state: 0 } }
})
const secondStore = init({
name: 'second',
models: { count: { state: 5 } }
})
getState() // { first: { count: 1 }, second: { count: 5 } }