我对React/Redux很陌生。我在Redux应用程序中使用一个fetch API中间件来处理API。它是(redux-api-middleware)。我认为这是处理异步API动作的好方法。但我发现有些情况无法解决。
正如主页(生命周期)所说，fetch API的生命周期始于调度CALL_API动作并以调度FSA动作结束。
所以我的第一个问题是，在获取API时显示/隐藏预加载程序。中间件会在开始时分派FSA操作，并在结束时分派FSA操作。这两个操作均由减速器接收，减速器只应进行一些正常的数据处理。没有UI操作，没有更多操作。也许我应该将处理状态保存在状态中，然后当存储更新时呈现它们。
但是如何做到这一点？React组件是否可以遍布整个页面？从其他操作更新存储会发生什么情况？我的意思是它们更像事件而不是状态！
甚至更糟糕的情况是，当我必须在redux / react应用程序中使用本机确认对话框或警报对话框时，我该怎么办？它们应该放在操作或减速器中？
最好的祝福！期待回复。
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
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>
}
Promise.all将它们分组成一个单一的promise，然后为所有的fetch请求派发一个单一的action。否则，你必须在你的状态中维护多个isFetching变量。 - Sebastien LorberisFetching 标志。它为每个正在获取的对象集合设置。您可以使用 reducer 组合来实现这一点。 - Dan AbramovRECEIVE_POSTS从未被触发，加载标志将保持不变，除非您创建了某种超时来显示“加载错误”的消息。 - James111很好的答案，Dan Abramov！只想补充一点，在我的一个应用程序中我也几乎完全是这样做的（将 isFetching 保留为布尔值），结果不得不将其更改为整数（最终阅读为尚未完成的请求数量），以支持多个同时进行的请求。
使用布尔值：
请求1开始 -> 加载动画出现 -> 请求2开始 -> 请求1结束 -> 加载动画消失 -> 请求2结束
使用整数：
请求1开始 -> 加载动画出现 -> 请求2开始 -> 请求1结束 -> 请求2结束 -> 加载动画消失
case REQUEST_POSTS:
return Object.assign({}, state, {
isFetching: state.isFetching + 1,
didInvalidate: false
})
case RECEIVE_POSTS:
return Object.assign({}, state, {
isFetching: state.isFetching - 1,
didInvalidate: false,
items: action.posts,
lastUpdated: action.receivedAt
isFetching标志的对象。如果您仔细查看我链接的示例，您会发现并非只有一个具有isFetched的对象，而是有很多：每个子版面一个（在该示例中被获取）。 - Dan Abramov我想添加一些内容。真实世界的例子使用 store 中的字段 isFetching 表示正在获取集合中的项。任何集合都可以泛化为一个 pagination reducer，可以连接到您的组件以跟踪状态并显示是否正在加载集合。
我遇到了这样的情况，我想获取一个不符合分页模式的特定实体的详细信息。我希望有一个表示从服务器获取详细信息的状态，但我也不想只为此创建一个 reducer。
为了解决这个问题，我添加了另一个通用 reducer，称为 fetching。它的工作方式类似于分页 reducer，其职责仅是监视一组操作，并使用配对的 [entity, isFetching] 生成新状态。这允许将 reducer 连接到任何组件，并知道应用程序当前是否正在获取数据，而不仅仅是针对集合而言。
const loaderWrapper = loaderFactory(actionsList, monitoredStates);
- 包装器：工厂生成的组件是一个“高阶组件”（就像Redux中connect()返回的那样），因此您可以将其添加到您现有的内容中。const LoadingChild = loaderWrapper(ChildComponent);
- 操作/Reducer交互：包装器检查它插入的Reducer是否包含关键字，告诉它不要传递给需要数据的组件。包装器分派的操作预计会产生相关的关键字（例如redux-api-middleware分派ACTION_SUCCESS和ACTION_REQUEST）。 （当然，您也可以在其他地方分派操作并从包装器中进行监视。）
- 加载指示器：当您的组件依赖的数据尚未准备好时，您希望出现的组件。我添加了一个小div，以便您可以测试它而不必进行调整。import React from 'react';
import { myAsyncAction } from '../actions';
import loaderFactory from 'react-loader-factory';
import ChildComponent from './ChildComponent';
const actionsList = [myAsyncAction()];
const monitoredStates = ['ASYNC_REQUEST'];
const loaderWrapper = loaderFactory(actionsList, monitoredStates);
const LoadingChild = loaderWrapper(ChildComponent);
const containingComponent = props => {
// Do whatever you need to do with your usual containing component
const childProps = { someProps: 'props' };
return <LoadingChild { ...childProps } />;
}
一个用于监视加载器的reducer（尽管如果您希望，可以以不同的方式连接它）：
export function activeRequests(state = [], action) {
const newState = state.slice();
// regex that tests for an API action string ending with _REQUEST
const reqReg = new RegExp(/^[A-Z]+\_REQUEST$/g);
// regex that tests for a API action string ending with _SUCCESS
const sucReg = new RegExp(/^[A-Z]+\_SUCCESS$/g);
// if a _REQUEST comes in, add it to the activeRequests list
if (reqReg.test(action.type)) {
newState.push(action.type);
}
// if a _SUCCESS comes in, delete its corresponding _REQUEST
if (sucReg.test(action.type)) {
const reqType = action.type.split('_')[0].concat('_REQUEST');
const deleteInd = state.indexOf(reqType);
if (deleteInd !== -1) {
newState.splice(deleteInd, 1);
}
}
return newState;
}
我期望在不久的将来，我会为该模块添加时间限制和错误处理，但是这种设计模式不会有太大变化。
对于你的问题，简短的回答如下：
connect()或低级别的store.subscribe()方法向您的存储添加更改侦听器。您应该在存储中拥有加载指示器，然后存储更改处理程序可以检查并更新组件状态。根据状态，组件将呈现预加载器，如果需要的话。
alert和confirm不应该是问题。它们是阻塞的，而且alert甚至不需要用户输入。对于confirm，如果用户选择应影响组件渲染，则可以基于用户单击设置状态。如果不是，则可以将选择存储为组件成员变量以供以后使用。addNotification(message)。另外一个情况是预加载器，也由宿主原生应用程序提供，并通过其JavaScript API触发。我在React组件的componentDidUpdate中添加了一个包装器来处理这些API。我应该如何设计此组件的props或state呢？ - 企业应用架构模式大师@connect(
// map state to props
state => ({
isFetching :state.main.get('isFetching'), // ProgressIndicator
notification :state.main.get('notification'), // Snackbar
error :state.main.get('error') // ErrorPopup
}),
// mapDispatchToProps
(dispatch) => { return {
actions: bindActionCreators(actionCreators, dispatch)
}}
我正在保存类似这样的网址：
isFetching: {
/api/posts/1: true,
api/posts/3: false,
api/search?q=322: true,
}
然后，我有一个通过reselect记忆化的选择器。
const getIsFetching = createSelector(
state => state.isFetching,
items => items => Object.keys(items).filter(item => items[item] === true).length > 0 ? true : false
);
Object.keys(items).filter(item => items[item] === true).length > 0 ? true : false 替换为 Object.keys(items).every(item => items[item])。 - Alexandre Annicsome 而不是 every，但是第一个提议中有太多不必要的比较。Object.entries(items).some(([url, fetching]) => fetching); - Rafael Porras Lucena