如何使 React Redux 应用程序与夹具数据一起工作？答案

【问题标题】：how to make React Redux application work with fixture data?如何使 React Redux 应用程序与夹具数据一起工作？
【发布时间】：2018-04-20 21:27:10
【问题描述】：

如何配置 react redux 应用程序以使用虚拟数据（夹具）直到服务器 API 准备好？一旦 API 准备就绪，拨动开关，它就会开始使用服务器 API 来获取数据而不是虚拟数据（json 文件）。

【问题讨论】：

标签： reactjs redux

【解决方案1】：

您的问题的答案是initialState。创建 Redux 存储时，您可以将 initialState 传递给它。 Here are some docs createStore。

您可以选择将初始状态指定为 createStore() 的第二个参数。

这里还有一个和你类似的stack overflow question

【讨论】：

【解决方案2】：

如果你想存储一些固定的数据，直到你获取要更新的数据是

使用Initializing State

然后使用 React Lifecycle Method componentDidMount() 获取数据。

【讨论】：

【解决方案3】：

一种选择是使用this 网页作为虚假支持。它返回 REST 请求的虚拟数据。真正的后端准备就绪后，只需更改代码中的端点即可。

【讨论】：

【解决方案4】：

非 React-Redux 部分：

您将要为您的应用程序制作一个 api。

从 './fakeData.json' 导入 fakeData;

const api = {
    getTodos: function() {
        return new Promise((resolve, reject) => {
            resolve(fakeData.todos);
        });
    },
    ...
};

通过这种方式，您可以将 api 方法导入到您的组件中，并使用一种方法来访问您的数据。这很好，因为现在组件不关心如何检索数据，只关心通过具有特定签名的方法访问数据。

现在您可以在整个代码中使用该方法，并且当您拥有后端时，您只需更改 api 对象上的方法实现即可。

React-Redux 部分：

如果您想为您的应用程序添加状态，您可以在createStore 方法中执行此操作；它采用可选的第二个参数preloadedState。在官方Redux 文档中阅读此处Initializing State。

【讨论】：