利用本地状态并避免在数据已经可用时获取数据？

Question

我目前有几个 api 获取数据，这反过来又需要来自先前 api 的数据，以便后续 api 获取必要的数据，具体取决于交互和路由。目前，我已经将所有这些联系在一起，并且与我的减速器和动作配合得很好。但是，我想知道如何根据本地状态是否已经可用有条件地获取数据？

我的理想解决方案是在用户第一次加载数据后利用本地状态，而不必继续在其初始实例上获取数据。我见过很多从 api 中提取数据的例子，但是没有一个例子可以说明出于性能原因使用本地数据（已经获取），而不是每次渲染组件/页面时都必须调用 api。

解决这种情况的最佳方法是什么？

这是我目前所拥有的，想知道这是否是一个好方法？

idea.sagas.js

function shouldFetchIdeas() {
  const state = store.getState();
  if (!state.idea.ideas) {
    return true;
  } else {
    return false;
  }
}

export function* fetchIdeas({ payload: organizationId }) {
  if (shouldFetchIdeas()) {
    try {
      const fetchApi = yield axios(
        `https://api.getconflux.com/api/v1/public/${organizationId}/ideas`
      );
      yield put(fetchIdeasSuccess(fetchApi.data.rows));
    } catch (error) {
      yield put(fetchIdeasFailure(error.message));
    }
  }
}


export function* onFetchIdeasStart() {
  yield takeLatest(IdeasActionTypes.FETCH_IDEAS_START, fetchIdeas);
}

export function* ideaSagas() {
  yield all([call(onFetchIdeasStart)]);
}

这目前有效，但感觉很脏。我有大约 3-4 个 api 调用，我上面展示的就是一个例子。是否有替代方法或正确方法来利用本地状态而不必每次都获取数据？

无论如何，很高兴听到您的想法，或者是否有更好的管理方法，或者您是否可以指导我找到任何解决方案或任何示例。

提前致谢！

Answer 1

您应该使用本地状态而不是再次获取数据以更新您的本地状态并因此更新视图。这是 redux 等框架试图实现的目标之一。

为此，请使用一个容器组件来获取所有必要的数据并将其传递给每个路由中的子组件：

class App extends Component {
    componentDidMount() {
        this.props.actions.getTrailers();
        this.props.actions.getCharacters();
        this.props.actions.getFavorites();
    }

    render() {  
        return (
            <Switch>
                <Route path="/characters">
                    <Characters characters={characters} />
                </Route>
                <Route path="/favorites">
                    <Favorites favorites={favorites} />
                </Route>
                <Route path="/trailers">
                    <Trailers trailers={trailers} />
                </Route>
            </Switch>
        }
    }
}

在每个子组件内部，您可以使用redux 选择器访问其他组件的数据。例如<Trailers /> 可以通过选择器访问favorites 和characters，或者使用自己的props 来获取他的专用数据（即：trailers）。

这种做法可以减少多余的 API 调用，并帮助您在开发工具中保持网络选项卡的整洁。此外，由于您已经预取了子组件的数据，这将有助于更快地呈现子组件。

此外，想想如何在 CRUD 操作上管理相同的做法。每个操作还需要 API 调用。您可以在 reducer 中处理它们，并避免为每个操作再次获取数据。这样做将使您的应用保持响应。

除非你点击刷新，否则 Redux 会保持你的状态，那么你需要 redux-persist。

希望它有所帮助，我可能会更新此答案，因为它可能需要进一步澄清。