Search code examples
jsondictionaryreduxstore

Redux: combine data from multiple json files into one state


I'm new to redux and trying to map an initial state to store from three different json files. Components in the app use bits from different files but as I understand it, store needs one single state-of-everything to pass to components.

What is the correct way to do this?

import data1 from './data1.json'
import data2 from './data2.json'
import data3 from './data3.json'
import storeFactory from './store'

const initialState = (localStorage["redux-store"]) ?
    JSON.parse(localStorage["redux-store"]) :
    data1 + data2 + data3

const store = storeFactory(initialState)
console.log(store.getState())
store.subscribe(saveState)

Solution

  • Assuming each JSON's root is an object, I would use the _.extend() function from lodash for this kind of thing:

    import data1 from './data1.json'
    import data2 from './data2.json'
    import data3 from './data3.json'
    combined = _.extend({},
        data1,
        data2,
        data3
    )
    

    Then you can pass that object into redux as per usual.

    EDIT: Based on comments, if each of the JSON objects are structured like

    {
        data: [{
            key1: "value1",
            key2: "value2",
            ...
        }]
    }
    

    then you'd have to combine them like this:

    combined = _.extend({},
        data1.data[0],
        data2.data[0],
        data3.data[0]
    )
    

    assuming that there really is only one item in each data's array.