Sharing data across React components

Question

In front-end apps there is often data which needs to be accessed by many components. Routing is one example, another is configuration data, e.g. feature switches, default language, etc.

In an app that isn't using any particular framework, I might share this configuration data across modules using

export class Configuration {

  static getConfig () {
    // get the config from the server
    return axios.get('/config').then(function (response) {
      return response;
    })
  }
}

Then import this class into any module that needs to access configuration data. With some front-end framework, it's obvious how to share such "global" data, e.g.

• AngularJS - Configuration should be defined as a service that's dependency-injected into any controllers/directives/services that need to access config. data
• Vue.js - use a mixin

However, when using ReactJS it's not obvious which approach should be used. Possible options are:

1. A plain-old JavaScript module. Encapsulate the data to be shared as a function/method, and import it into any React components that need to access it. The seems like the simplest approach, but I have the feeling that when writing a ReactJS app everything should be defined as a component, rather than JavaScript classes/functions.

2. Redux seems to be recommended approach for sharing-state within large apps, but this feels like overkill for smaller projects

3. Something else?

Answer 1

but I have the feeling that when writing a ReactJS app everything should be defined as a component, rather than JavaScript classes/functions.

I really don't see a reason why everything should be a component in React. If it is just data, you can create a single instance of that JS object say and import that anywhere you need it.

I have used similar thing in my app, where I had a "global" kind of object which was saving different configs etc, and then I was using that in the components which needed that data.

Here is also some more info about component communication in React.

Answer 2

1. A plain-old JavaScript module. Encapsulate the data to be shared as a function/method, and import it into any React components that need to access it. The seems like the simplest approach, but I have the feeling that when writing a ReactJS app everything should be defined as a component, rather than JavaScript classes/functions.

I disagree, React is a library that helps to create user interfaces through components but it doesn't mean that (services, translations, configuration data) have to be built into components, on the other hand, it's actually discouraged you shouldn't couple your services/configuration to a library you should limit the scope of React to what it is used for. So using plain-old JavaScript modules feels the right way to implement a simple react app.

2. Redux seems to be recommended approach for sharing-state within large apps, but this feels like overkill for smaller projects

I think it depends on the complexity of the app rather the size, here is where you should think on, how does your app will evolve or if redux isn't what you really need to remove all this data-sharing dependency within React.

3. Something else?

The react context (discourage)
The observable pattern

https://www.npmjs.com/package/react-observable-subscribe

Answer 3

I think you should go for the redux solution. It sounds like an over kill but it has an added advantage of having a global state object, therefore you can easily choose when to re-render your app when data is shared across compoents.

Answer 4

you can use context in react : https://reactjs.org/docs/context.html

or you can create a global variable in window object too

the other way is to use observer design pattern plagin and use it.

mobX or other stateManagement component is good too beside redux