Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should I store static configuration in redux?

Tags:

reactjs

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?)

like image 251
askmike Avatar asked Oct 21 '16 14:10

askmike


People also ask

Should I store everything in Redux?

Some users prefer to keep every single piece of data in Redux, to maintain a fully serializable and controlled version of their application at all times. Others prefer to keep non-critical or UI state, such as “is this dropdown currently open”, inside a component's internal state. Using local component state is fine.

What should be stored in Redux?

As an app gets large and complex, you might want to store large, bulky data inside your Redux store and access it inside a component. A Redux store doesn't have a limit on the amount of data stored, so you can pretty much use it to store almost anything, including bulky JSON data, data in table form, etc.

Does Redux reduce performance?

While it's certainly possible for each of these to become a performance concern in sufficiently complex situations, there's nothing inherently slow or inefficient about how Redux is implemented.

Why you should not use Redux?

Even though Redux is a great tool for state management, it's important not to overuse it. Using Redux in simple and small apps may add unjustified complexity to the app architecture, lead to wasteful memory usage, and require adding a caching solution to backup the application state.


1 Answers

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.

like image 74
lux Avatar answered Oct 29 '22 00:10

lux