When should I use Redux in my react application?

Question

I'm working on a react web app and our company bought an admin dashboard panel to save time. In this panel, they used redux to handle states and all setting parameters stored into redux ...

But really I'm confused about using Redux for each use case!

All of my requests and states are components base and are not global and those are not essential to use in other components of this app!

For example to load games list I've this code :

componentDidMount() {
    this.setState({
      loading: true
    });
    http._GET('/game/getAllGames')
    .then(response => {
      this.setState({
        loading: false
      });
      this.props.dispatch(gamesListAction(response.data.result.games));
    });
  }

In this case, I use a response and list only on the games-list page. So I think it's not logical I store a response.data into redux and then get all data with connecting and another process...

Or another example, for inserting forms I'll never need to store forms insert or API response because it's inserted and not getting data from API!

I've read about redux but I think redux is not suitable for every app and use case and I should not store single-use responses to redux.

Answer 1

The reduxjs FAQ describes it the best.

In general, use Redux when you have reasonable amounts of data changing over time, you need a single source of truth, and you find that approaches like keeping everything in a top-level React component's state are no longer sufficient.

Redux is nothing but a state mangement tool and you need more compelling reasons to use it: In your case, firstly:

• React's setState will bloat the component overtime with growing requirements and it is much harder to maintain. Separating out the state management into a reducer refactors nicely and makes it more readable.
• Caching component state, for example if you are using a shopping cart, progressive wizards. There a is lot of to and fro in user interaction which result in state changes, in such cases. Maintaining your state in redux makes a lot of sense now.
• Deeply nested components passing on state and lots of props to their children quickly bloat with growing requirements. This is a classic scenario with lot of wrapper components (especially with UI details). A better way would be to refactor and directly connect low level components to redux (transform into a container. Read: presentational-and-container-components)
• Application state mapping to multiple container components. For example, if you had your getAllGames loading state to be represented in some progressive-loader-component somewhere out in your app. Using redux will ease your pain sharing data between this components.
• Useful when building root level components which can possibly have interactions from everywhere. Like your useraccount component, modal, alerts, loaders.

You will realize, you are writing some boilerplate code with actions and reducers. Though overtime this is much better than reacts state management which can progressively grow complex within stateful components quickly.

Answer 2

Yes, You are right redux is not suitable for every application, as per my knowledge redux or state management is used mainly if you want to show the user previous state instead of empty when some operation is happening

Here is a bit detailed explanation about when to use redux https://medium.com/@fastphrase/when-to-use-redux-f0aa70b5b1e2

Happy Coding !