我是 React/Redux 的新手。我在 Redux 应用程序中使用 fetch api 中间件来处理 API。它是 ( redux-api-middleware )。我认为这是处理异步 api 操作的好方法。但是我发现有些情况我自己解决不了。
正如主页 ( Lifecycle ) 所说，获取 API 生命周期开始于调度 CALL_API 操作，结束于调度 FSA 操作。
所以我的第一个案例是在获取 API 时显示/隐藏预加载器。中间件会在开始时派发一个 FSA Action ，在结束时派发一个 FSA Action 。这两个 Action 都由 reducer 接收， reducer 应该只进行一些正常的数据处理。没有UI操作，没有更多的操作。也许我应该将处理状态保存在状态中，然后在存储更新时呈现它们。
但是如何做到这一点呢？ react 组件流过整个页面？从其他操作更新商店会发生什么？我的意思是它们更像是事件而不是状态!
更糟糕的情况是，当我必须在 redux/react 应用程序中使用原生确认对话框或警报对话框时，我该怎么办？它们应该放在哪里，action 还是 reducer？
致以最良好的祝愿!求回复。
I mean they are more like events than state!
我不会这么说。我认为加载指示器是 UI 的一个很好的例子，它很容易被描述为状态的函数:在这种情况下，是一个 bool 变量。同时this answer是正确的，我想提供一些代码来配合它。
在async example in Redux repo , reducer updates a field called 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() 来订阅商店的状态和 returns isFetching as part of the mapStateToProps() return value所以它在连接组件的 Prop 中可用:
function mapStateToProps(state) {
const { selectedReddit, postsByReddit } = state
const {
isFetching,
lastUpdated,
items: posts
} = postsByReddit[selectedReddit] || {
isFetching: true,
items: []
}
return {
selectedReddit,
posts,
isFetching,
lastUpdated
}
}
最后，组件uses isFetching prop in the render() function呈现“正在加载...”标签(可以想象它是一个微调器):
{isEmpty
? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
: <div style={{ opacity: isFetching ? 0.5 : 1 }}>
<Posts posts={posts} />
</div>
}
Even a worse case, what should I do when I have to use the native confirm dialog or alert dialog in redux/react apps? Where should they be put, actions or reducers?
任何副作用(并且显示对话框肯定是副作用)不属于缩减器。将 reducer 视为被动的“状态构建器”。他们并没有真正“做”事情。
如果您希望显示警报，请在分派(dispatch) Action 之前从组件执行此操作，或从 Action 创建者执行此操作。当一个 Action 被调度时，执行副作用来响应它已经太晚了。
对于每个规则，都有一个异常(exception)。有时您的副作用逻辑非常复杂，您实际上想要将它们耦合到特定的操作类型或特定的缩减器。在这种情况下，检查高级项目，如 Redux Saga和 Redux Loop .仅当您对 vanilla Redux 感到满意并且确实存在您希望使其更易于管理的分散副作用问题时才这样做。