Question

使用React-Redux

我有一个选择列表，当用户选择其中一个选项时，将创建一个项目并将其放置在数据库中（如果重要，其选择框的原因是同一项目有多个变体，以及变化很重要）。

这正常工作。

我的问题是我不确定如何从Redux存储中获取新商品的ID。

仅出于嘲笑，先前的开发人员使用sagas进行了所有设置。因此，我仍在加快它们如何协同工作的速度。

所以，当检查选择框，功能checkFunction称为该呼叫在佐贺文件中的函数createItem。这些功能如下：

在Repositories.jsx中

  checkFunction = (data) => {
    const {createItem} = this.props;
    // data holds the info that we need to send to the action
    const created = createItem(data);
    // once data comes back, redirect the user ot the details of the created item
    // need id of created item
    // navigateTo(`/item-details/${created.id}`);
  }

在Repositories.saga.js中

export function* createItem(action) {
  try {
    const {payload: newItem} = action;
    // call api to create item
    const created = yield call(requestAPI.post, ITEMS_URL, newItem);
    // send message that its been done
    yield put(actions.repositories.createItem.ok(created));
    // send message to refresh item list
    yield put(actions.inventories.fetchItems.start());
  } catch (e) {
    yield put(actions.repositories.createItem.fail(e));
  }
}

我不明白创建后的项目如何返回ID。我觉得我在这里缺少一些基本知识。谁能指出我正确的方向？

Answer 1

实际上，从传奇中获取数据以响应组件并非易事。尽管每种方法都有其缺点，但有多种方法可以满足您的需求。

1。在传奇中致电navigateTo。

export function* createItem(action) {
    ...
    const created = yield call(requestAPI.post, ITEMS_URL, newItem);
    yield call(navigateTo, `/item-details/${created.id}`)
}

如果可以将navigateTo函数引入到传奇中，这将是我推荐的解决方案。导航是一种副作用，并且使用sagas来处理副作用。确保使用call效果，通过直接调用函数来更改url可能会导致某些问题。

2。将最新创建的商品ID存储在Redux商店中

在减速器中，当分派动作actions.repositories.createItem.ok(created)时，存储创建的项目信息，然后将最新创建的项目发送到组件。最后，当道具更改时，您可以使用componentDidUpdate或useEffect来调用navigateTo。

render() {
    const created = Redux.useSelector(state => state.created);
    useEffect(() => navigateTo(`/item-details/${created.id}`), [created])
    ...
}

这具有缺点，因为更改后的created值将导致组件重新呈现。

3。在createItem操作中发送回调

您可以将一个函数放入您的操作中，然后从传奇中调用它，并实质上将其用作回调。

组件：

checkFunction = (data) => {
    const {createItem} = this.props;
    // data holds the info that we need to send to the action
    const created = createItem(data, (created) => {
        navigateTo(`/item-details/${created.id}`);
    });
}

传奇：

export function* createItem(action) {
    ...
    const created = yield call(requestAPI.post, ITEMS_URL, newItem);
    action.callback(created)
    ...
}

此方法的问题是函数不可序列化，因此理想情况下应避免在操作中使用它们。同样，从技术上讲，可能有多个sagas处理相同的操作，然后使应该调用该回调的人感到困惑。

如何从react-redux存储中获取数据？

1 个答案: