我的意思是,它们更像是事件而不是状态!
我不会这么说。我认为加载指标是UI的一个很好的例子,很容易被描述为状态的函数:在这种情况下,是布尔变量的函数。虽然这个答案是正确的,但我想提供一些代码来配合它。
在 Redux 存储库中的异步
示例中,reducer 更新了一个名为 isFetching 的
字段:
case REQUEST_POSTS:
return Object.assign({}, state, {
isFetching: true,
didInvalidate: false
})
case RECEIVE_POSTS:
return Object.assign({}, state, {
isFetching: false,
didInvalidate: false,
items: action.posts,
lastUpdated: action.receivedAt
该组件使用 React Redux 订阅存储的状态,并将 isFetch 作为
mapStateToProps()
返回值的一部分返回,以便它在连接的组件的 props 中可用:connect()
function mapStateToProps(state) {
const { selectedReddit, postsByReddit } = state
const {
isFetching,
lastUpdated,
items: posts
} = postsByReddit[selectedReddit] || {
isFetching: true,
items: []
}
return {
selectedReddit,
posts,
isFetching,
lastUpdated
}
}
最后,该组件在 render()
函数中使用 isFetching
prop 来呈现“正在加载...”。标签(可以想象是一个微调器):
{isEmpty
? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
: <div style={{ opacity: isFetching ? 0.5 : 1 }}>
<Posts posts={posts} />
</div>
}
更糟糕的是,当我必须在 redux/react 应用中使用本机确认对话框或警报对话框时,我该怎么办?它们应该放在哪里,行动还是减少?
任何副作用(显示对话肯定是副作用)都不属于化简器。将化简器视为被动的“国家建设者”。他们并没有真正“做”事情。
如果要显示警报,请在调度操作之前从组件执行此操作,也可以从操作创建者执行此操作。在调度操作时,为时已晚,无法对其执行副作用。
对于每个规则,都有一个例外。有时,您的副作用逻辑非常复杂,以至于您实际上希望将它们耦合到特定的操作类型或特定的化简器。在这种情况下,请查看Redux Saga和Redux Loop等高级项目。只有当你对vanilla Redux感到满意并且有一个真正的分散副作用问题时,你才会这样做,你想让它更易于管理。