reactjs - Hydrating a React/Redux App From a REST API

Question

I have a React/Redux application for my front-end, and a REST API for the backend and I use JWT as a sort of 'session' id (comes out of the box with Laravel Passport, my oAuth server).

Anyways, I was wondering what the best strategy is for hydrating the redux store when the page initially loads when you have a RESTful service that has endpoints for individual resources.

At the moment I'm doing it on component mount. So say a component lists a resource, I call the api/hydrate the store on component mount for that resource. This results in many API calls though, and it can result in unnecessary calls when the component mounts again.

Is there a better alternative to this that you're aware of? My main concern is that I don't want to introduce some weird endpoints to my API specifically for hydrating pages.

Answer 1

不要将组件绑定到 api 端点。使用它们的生命周期钩子来触发数据的初始获取，但通过调度异步操作。当一个组件再次挂载时，它可以从 redux 状态渲染它的资源，或者运行一些逻辑来确定它已经过时并调度另一个动作来更新 store。