如何使用Redux访问本地JSON文件以在整个React应用程序中使用？

Question

我有一个使用Redux的react应用程序，出于测试目的，我创建了一个本地JSON文件，该文件位于应用程序内部名为data的文件夹内。

我试图将JSON数据传递给Redux，以便可以访问它，然后使用它来映射并在单独的组件中显示项目，但是我不知道如何执行此操作。 任何人都可以提供有关如何完成此操作的示例或资源吗？

Answer 1

将该json添加到商店的初始状态。 因此，每当您的应用程序启动时，它都会从json设置初始状态，然后在应用程序中的任何位置都可以使用它。

createStore(reducer,  require('your file path')

Answer 2

就像用户Sreeram在评论中说的那样，您可以直接require或import json文件，之后您将可以像其他任何对象一样对其进行访问。

这意味着您可以使用它来初始化化简器中的状态。

const testData = require('./data/thejson.json');

// use testData as the default argument, which will be used if state is undefined (as it will be when the app starts 
function someReducer(state = testData , action) {
  switch (action.type) {
    // some code here.. 
  }
}

Answer 3

您的数据是否出于开发目的？ 还是将其包含在生产中？
请记住json的大小

如果您使用Typescript至少为2.9，则可以设置：“ resolveJsonModule”：true，标志。 然后将其导入：

import data from 'path/to/data.json';

如果您使用的是webpack，从版本2开始，webpack将包含json-loader

import data from 'path/to/data.json';

您也可以提供它，我记不清了，但是有一种方法可以通过webpack开发服务器提供静态内容，该服务器在后台可以使用Express应用程序进行配置，然后就可以获取它。 希望对您有所帮助。