Search code examples
reactjsreduxflux

Should I store never changing (bootstrapped) data in the store?


I have some state in my application that is coming from the server and not going to change (during the lifetime of user session). This state is bootstrapped in HTML.

Should I incorporate it in a reducer as a part of the store? const bootstrappedData = (state, action) => state

Or should I expose some global helper like bootstrappedData.get('key')?


Solution

  • Funny, I hit this same decision just yesterday regarding data in my own store. And I reached the conclusion that we should only be storing stateful data in the Redux store, that is, data that is capable of maintaining state, or data that is subject to change. Static data by definition does not have state, and therefore does not need to be tracked as such.

    As a result, I typically have a /common/app-const.js file where I store these types of static objects. For instance, I store the DEFAULT_STATE of Redux, here, but also some other objects which are not subject to change (and are therefore not tracked in Redux).

    Now let's say I actually want to allow the end-user to manipulate numRows and numCols in the UI, well at that point I would surely need to put these in the Redux store, but not now, since they are just static constants!

    /common/app-const.js

    export const DEFAULT_STATE = {
        model: {},
        timer: {
            isRunning: false,
            ticks: 0
        }
    };
    
    export const GRID_DATA = {
        numRows: 50,
        numCols: 75,
    };
    

    And whenever I need this static data, it's as easy as an import:

    import { GRID_DATA } from '../common/app-const';