我觉得它们更像是事件而不是状态!
我不这么认为。我认为加载指示器是一个很好的 UI 案例,可以轻松地描述为状态的函数:在这种情况下,是一个布尔变量的函数。虽然
this answer 是正确的,但我想提供一些代码来配合它。
在 Redux 存储库中的
async
example 中,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 中的
connect()
方法订阅 store 的状态,并在
mapStateToProps()
返回值中
返回 isFetching
,以便它可以在连接的组件的 props 中使用:
function mapStateToProps(state) {
const { selectedReddit, postsByReddit } = state
const {
isFetching,
lastUpdated,
items: posts
} = postsByReddit[selectedReddit] || {
isFetching: true,
items: []
}
return {
selectedReddit,
posts,
isFetching,
lastUpdated
}
}
最后,该组件
在render()
函数中使用isFetching
属性来呈现一个“正在加载…”标签(也可以是旋转图标):
{isEmpty
? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
: <div style={{ opacity: isFetching ? 0.5 : 1 }}>
<Posts posts={posts} />
</div>
}
即使是更糟的情况,当我在redux/react应用程序中必须使用本地确认对话框或警报对话框时,我该怎么办?它们应该放在actions还是reducers中?
任何副作用(显示对话框肯定是副作用)都不应放在reducers中。将reducers视为被动的“状态构建器”。它们不会真正地“做”事情。
如果您希望显示警报,请在调度操作之前从组件中执行此操作,或者从操作创建者中执行此操作。调度操作时,执行副作用已经太迟了。
每个规则都有例外。有时,您的副作用逻辑非常复杂,您实际上想将它们与特定的操作类型或特定的reducers耦合。在这种情况下,请查看高级项目,例如
Redux Saga和
Redux Loop。只有在熟悉vanilla Redux并且有散布的副作用问题需要更易于管理时才这样做。