askmike askmike - 1 month ago 20
React JSX Question

Should I store static configuration in redux?

I am building a react/redux web app and am wondering where I should static configuration information that never changes (while the webapp is running anyway).

This is the data in question

This information is used in different parts of the app, for example: there is a form where you are able to select any item out of the main array, and by doing so populating another select field with properties of the selected array:

<select>Choose an exchange</select>
<select>Choose a market (that is available in the above exchange)</select>


This would lend itself nicely to some reducer logic (that sets
state.markets
based on what is selected in the first
select
), but should it filter based on other state in the tree, or just load the data in a closure inside the reducer (keeping everything unrelated outside of state tree)? Or is this not state at all (and should the container load this file in and filter based on a single
state.exchange
state prop)?

When the form is filled in the result will be handled like:

{exchange: 'a', market: 'b'}


So that would be state too (I guess?)

lux lux
Answer

My understanding of redux is that we should only be storing stateful data in the store, that is, 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. In your case, you can simply move all the static data from exchange.js into a common file that you then import wherever you need it.

/common/app-const.js

export default {
    markets: [
          { pair: ['USD', 'BTC'], minimalOrder: { amount: 0.01, unit: 'asset' } },
          { pair: ['RUR', 'BTC'], minimalOrder: { amount: 0.01, unit: 'asset' } },
          { pair: ['EUR', 'BTC'], minimalOrder: { amount: 0.01, unit: 'asset' } },
          ...
}

I understand your approach however, it would be nice to simply inject your data, by way of connect() via react-redux, however its a bit more straightforward to just import the static data from a file where needed.