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 component, but I have no idea how to do this. Can anyone provide examples or resources on how to accomplish this?
Like the user Sreeram said in the comments, 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..
}
}
import testData from "./data/thejson.json" also works if you prefer this syntax.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.
