添加自动 loading 指示器 effects 到 Rematch 。灵感来自于 dva-loading。
安装
npm install @rematch/loading
对于 @rematch/core@0.x 使用 @rematch/loading@0.5.0
示例
请参见下面的示例，使用一个按钮中的 loading 指示器。
import React from 'react'
import { connect } from 'react-redux'
import AwesomeLoadingButton from './components/KindaCoolLoadingButton'
const LoginButton = (props) => (
<AwesomeLoadingButton onClick={props.submit} loading={props.loading}>
Login
</AwesomeLoadingButton>
)
const mapState = (state) => ({
loading: state.loading.effects.login.submit, // true when the `login/submit` effect is running
// or
loading: state.loading.models.login, // true when ANY effect on the `login` model is running
})
const mapDispatch = (dispatch) => ({
submit: () => dispatch.login.submit()
})
export default connect(mapState, mapDispatch)(LoginButton)
Demo
查看一个 demo
设置
配置 loading。
import { init } from '@rematch/core'
import createLoadingPlugin from '@rematch/loading'
// see options API below
const options = {}
const loading = createLoadingPlugin(options)
init({
plugins: [loading]
})
Options
asNumber
该 loading state 值 是一个“counter”，返回一个数字（例：store.getState().loading.global === 5）
缺省值是false，返回一个布尔值（例：store.getState().loading.global === true）
name
在这种情况下，可以从state.load.global访问 loading 。
默认名称是loading（例：state.loading.global）
whitelist
一个 action 列表。命名使用“model名称” / “action名称”
{ whitelist: ['count/addOne'] })
blacklist
一个 action 列表，不使用 loading 指示器。
{ blacklist: ['count/addOne'] })
model
{ model: {...} }
包含在 loading model 中的 model 配置对象。 用户可以添加自定义的name，reducer和state配置以及selectors和其他插件提供的其他有效配置。
这个配置的一个优点是它提供了利用 @rematch/select 插件的优势，并且添加自定义的selectors到你的loading model。例如：
import createLoadingPlugin from '@rematch/loading'
// @rematch/selector plugin API
const options = {
model: {
selectors: {
loggingIn(state) { return state.effects.login.submit }
}
}
}
const loading = createLoadingPlugin(options)
关于模型配置选项的一些注意事项：
name配置将优先并覆盖model.name配置。
effects 配置(model.effects)没有经过测试。
reducers 配置(model.reducers)已经过测试，可用于添加 reducer。尽管如此，这个配置的一个例子还不清楚。任何show和hidereducer都将被插件覆盖。
除非你知道你在做什么，否则不建议提供model.state配置。 提供错误的配置可能会以意想不到的方式破坏插件。
mergeInitialState
{ mergeInitialState: (state, newObject ) => any }
通过将 loading model 与提供的对象合并来改变 model 的初始状态的函数。它接受当前的state作为第一个参数和要被合并的newObject作为第二个参数。 这个函数改变提供的state并且不返回一个新的 state 是很重要的。
通常，用户不应该设置此配置。 但是，如果用户未使用JavaScript对象作为store，则需要此配置。 例如，使用Immutable JS时将需要它。
loadingActionCreator
{ loadingActionCreator: (state, name, action, converter, countState) => any }
一个 reducer 函数，loading effect 被分发时返回新状态。它接受当前的state，被分发model的name（string），被分发的action（string），一个 converter 函数和当前的 countState 对象。
这是一个复杂的函数，最好接受默认值。 如果你想定制这个函数，看看 loading 插件源代码，以了解这个函数应该如何工作。 这个配置是公开的，所以用户可以使用不是JavaScript对象的store（例如Immutable JS）。
Immutable JS 示例
用户可以通过插件使用 Immutable.js Map。为此，需要设置 mergeInitialState，loadingActionCreator和model.state配置。这是一个简单的例子：
import createLoadingPlugin from '@rematch/loading'
import { fromJS } from 'immutable';
// Immutably returns the new state
const immutableLoadingActionCreator = (state, name, action, converter, cntState) => (
state.asImmutable().withMutations( map => map.set('global', converter(cntState.global))
.setIn(['models', name], converter(cntState.models[name]))
.setIn(['effects',name, action], converter(cntState.effects[name][action]))
)
)
// Mutates the current state with a deep merge
const immutableMergeInitialState = (state, newObj) => (
state.asMutable().mergeDeep(fromJS(newObj))
)
const options = {
loadingActionCreator: immutableLoadingActionCreator,
mergeInitialState: immutableMergeInitialState,
model: {
state: fromJS({}),
}
}
const loading = createLoadingPlugin(options);
上面的例子已经过测试，包含在这个包的测试套件中。
