I have a react app using Redux, and for testing purposes I created a local JSON file that sits inside a folder called data from within my app.

I'm trying to pass that JSON data to Redux so that I can access it and then use it to map out and display items in a separate ponent, but I have no idea how to do this. Can anyone provide examples or resources on how to acplish this?

I have a react app using Redux, and for testing purposes I created a local JSON file that sits inside a folder called data from within my app.

I'm trying to pass that JSON data to Redux so that I can access it and then use it to map out and display items in a separate ponent, but I have no idea how to do this. Can anyone provide examples or resources on how to acplish this?

• javascript
• reactjs
• redux

• require('./data/thejson.json'); – Siri Commented Jun 28, 2019 at 16:25

3 Answers 3

Like the user Sreeram said in the ments, you can directly require or import the json file, after which you will have access to it like any other object.

This means you can use it to initialize your state in your reducer.

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.. 
  }
}

Add that json to the initial state of the store. So whenever your app starts it sets the initial state from the json and then use can use it anywhere in your app.

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

Is your data for dev purposes? or is it going to be included in production?
Keep in mind the size of the json

If you are using Typescript at least to 2.9 you can set: "resolveJsonModule": true, flag. and then import it:

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

If you are using webpack, since version 2, webpack includes json-loader

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

You could also serve it, I can't remember well but there's a way to serve static content with webpack dev server, which uses an express app under the hood that can be configured and then you can fetch it. I hope that helps.