Reactjs Redux-选择器失败时调度异步操作

我有以下连接的组件：

const selectFullNameById = (state, id) =>
{
    const user = state.domain.people.values.find(u => u.id === id)
    return `${user.lastName} ${user.firstName}`
}

const mapStateToProps = (state, ownProps) => {

    const files = ownProps.files.map(f => ({
        ...f,
        fullName: selectFullNameById(state, f.creatorId)
    }))

    return {
        ...ownProps,
        files
    }
}

export default connect(mapStateToProps)(Uploader)

连接的组件接收一个数组，该数组将对象文字作为称为文件的道具。每个对象文字都有一个creatorId值，我想将此人的全名传递给我的表示组件，因此我使用选择器“selectFullNameById”来获取这些值。当此人在全局状态下实际可用时，此操作有效

---

但这可能是因为这个person对象文字在全局状态中还不存在，因此应该对服务器进行提取以检查他的名字。因此，我有一个异步操作创建者来执行查找。但我不知道如何从选择器中分派此文件。

我将执行以下操作：

//1. create a default state for a person:

const DEFAULT_PERSON = { 
  id: -1,
  fullName: 'n/a',
  …
} //some useful stuff

//2. modify electFullNameById to

const selectFullNameById = (state, id) => {
  const user = state.domain.people.values.find(u => u.id === id) || null;
  //return default data, if user does not exist
  return (user === null) ?
    Object.assign({}, DEFAULT_PERSON).fullName :
    `${user.lastName} ${user.firstName}`
}

//3. refactor mapStateToProps to:

const mapStateToProps = (state, ownProps) => {

  const files = ownProps.files.map(f => ({
      ...f,
      fullName: selectFullNameById(state, f.creatorId)
  }))

  //no need to add the ownProps here
  return { files }
}

因此，基本思想是：创建一些有用的默认数据，以防找不到用户。这样，您就不会在以下数据使用中出现任何»未定义«错误

如果可以像这样添加未定义的用户（假设您使用的是redux thunk和fetch），则调度异步操作：

const loadUser=uid=>dispatch=>fetch（`${url}/${uid}`）
.then（response=>response.json（））
.then（json=>dispatch({
键入：“用户/已加载”，
有效负载：{user:json}
}));
constyourcomponent=（{users，loadUser}）=>{
返回(
{
user.map（user=>{
如果（！user loaded）loadUser（user.id）；
返回（基于默认数据的html）
})
}
);
}

---

您可以在渲染时立即调度该操作，因为该操作是异步的，因此不会立即调用组件的重新渲染，这将导致递归。如果有许多用户需要加载，那么最好将其筛选出来并立即加载。

我将执行以下操作：

//1. create a default state for a person:

const DEFAULT_PERSON = { 
  id: -1,
  fullName: 'n/a',
  …
} //some useful stuff

//2. modify electFullNameById to

const selectFullNameById = (state, id) => {
  const user = state.domain.people.values.find(u => u.id === id) || null;
  //return default data, if user does not exist
  return (user === null) ?
    Object.assign({}, DEFAULT_PERSON).fullName :
    `${user.lastName} ${user.firstName}`
}

//3. refactor mapStateToProps to:

const mapStateToProps = (state, ownProps) => {

  const files = ownProps.files.map(f => ({
      ...f,
      fullName: selectFullNameById(state, f.creatorId)
  }))

  //no need to add the ownProps here
  return { files }
}

因此，基本思想是：创建一些有用的默认数据，以防找不到用户。这样，您就不会在以下数据使用中出现任何»未定义«错误

如果可以像这样添加未定义的用户（假设您使用的是redux thunk和fetch），则调度异步操作：

const loadUser=uid=>dispatch=>fetch（`${url}/${uid}`）
.then（response=>response.json（））
.then（json=>dispatch({
键入：“用户/已加载”，
有效负载：{user:json}
}));
constyourcomponent=（{users，loadUser}）=>{
返回(
{
user.map（user=>{
如果（！user loaded）loadUser（user.id）；
返回（基于默认数据的html）
})
}
);
}

---

您可以在渲染时立即调度该操作，因为该操作是异步的，因此不会立即调用组件的重新渲染，这将导致递归。如果有许多用户需要加载，最好将其筛选出来并立即加载。

使用选择器中的onChange事件启动操作。然后，在操作中，首先检查您的存储是否已经有名称，否则请进行服务器获取。使用选择器中的onChange事件启动操作。然后，在操作中，首先检查您的存储是否已经有了该名称，否则，请进行服务器获取。如果我按照您的解决方案触发异步请求，我必须在每个使用用户名的组件中执行此操作。我不认为这是一个可行的解决方案。嗯，1。您没有说有几个组件使用用户数据。2.您询问如何在这种情况下执行异步请求，这就是我的回答。存在的问题是，渲染时数据不一致。如果您在开始渲染任何内容之前修复它，那么整个过程会容易得多。最简单的方法是，在最初获取用户数据的操作中这样做，如果数据已经存在于»页面加载«中，我建议在启动时对其进行预处理。我无法在启动时预取30000个用户的列表。如果我能立即将所有数据放入我的存储中，我就不需要问这个问题了。你说“我的数据不一致”是什么意思？这也是一个常见的问题，有很多解决方案。一个是分页，另一个是无限卷轴。如果列表中有这么多项，则需要一种只查询其中一部分的方法。“但可能是这个person-object-literal还没有出现在全局状态中”，这就是我所指的不一致。部分数据在那里，但不是全部。无论如何：如果你有一个适合该实体的REST Api，你就不会有问题，而且你的视图客户端可以很容易地以一块一块地使用项目的方式进行编码。“一个是分页，另一个是无限滚动。如果列表中有这么多项目，你需要一种只查询其中一部分的方法。”我不是说呈现这个列表，我说的是质疑它。我有一个适当的RESTAPI来获取这个实体。我要问的是，当我的应用商店中不存在这个实体时，构造JS代码以分派操作从REST API获取这个实体的最佳方法是什么。如果我按照您的解决方案触发异步请求，我必须在每个使用用户名的组件中执行此操作。我不认为这是一个可行的解决方案。嗯，1。您没有说有几个组件使用用户数据。2.您询问如何在这种情况下执行异步请求，这就是我的回答。存在的问题是，渲染时数据不一致。如果您在开始渲染任何内容之前修复它，那么整个过程会容易得多。最简单的方法是，在最初获取用户数据的操作中这样做，如果数据已经存在于»页面加载«中，我建议在启动时对其进行预处理。我无法在启动时预取30000个用户的列表。如果我能立即将所有数据放入我的存储中，我就不需要问这个问题了。你所说的“我的数据不一致”是什么意思？这也是一个常见的问题，而且存在大量的错误