CODEWITHSUNDEEP
reactjsredux
Adeel Imran
Adeel Imran

Reputation: 13976

Should you store Application state in local state or Redux Store

I have been working with Redux for almost a month now. My question is this that I am putting all my app data in the redux store, but should I also put the toggle states that helps me change my UI in redux state or should I simply manage that locally in each page by just doing

this.setState({ showActiveForm : false })

Upvotes: 6

Views: 4994

Answers (5)

Shubham Khatri
Shubham Khatri

Reputation: 282000

The current best practice is to use local state to handle the state of your user interface (UI) state rather than data.

Your case is the perfect example of the above. So the state to manage hiding and showing of a component must be within the local state itself and not redux store

Another example of UI data that you could store in local state would be the currently selected tab from a list of options.

A good way to think about when to use local state is to consider whether the value you’re storing will be used by another component. If a value is specific to only a single component, then it’s safe to keep that value in local state.

To elaborate further

Redux is also useful for triggering events for which you need access on multiple components or across multiple routes. An example of this would be a login modal, which can be triggered by a multitude of buttons all across your app. Rather than conditionally rendering a modal in a dozen places, you can conditionally render it at the top-level of your app and use a Redux action to trigger it by changing a value in the store.

Upvotes: 6

hannad rehman
hannad rehman

Reputation: 4341

3 points that i consider when working with react redux

1.keep UI state and transitory data (such as form inputs) in local state.

2.keep data that you intend to share across components in Redux store.

3.Data that you fetch from Server should go to redux store.

Upvotes: 3

Paul. B
Paul. B

Reputation: 1448

There is no right or wrong answer for this. To help you decide, here are some common rules of thumb taken directly from the redux documentation:

  • Do other parts of the application care about this data?
  • Do you need to be able to create further derived data based on this original data?
  • Is the same data being used to drive multiple components?
  • Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?
  • Do you want to cache the data (ie, use what's in state if it's already there instead of re-requesting it)?

Another advantage to keeping the majority of your UI state in redux is that you can write more stateless functional components and make use of the performance optimisations they will bring in future versions of React:

This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.

Upvotes: 8

Shashith Darshana
Shashith Darshana

Reputation: 2795

That depends on how your components are organized. If the state of toggle is used across multiple components then I prefer to manage the state via redux store. If the the status is local to that component and if it is not used in anywhere else best thing to do would be managing the state within the component. Therefore the component will be self contained.

Upvotes: 3

Dmitriy Nevzorov
Dmitriy Nevzorov

Reputation: 6078

Usually, the rule of thumb is that you use a redux store to manage data in your application aka storing items fetched from the server and local react state for ui behaviors, like toggles in your case. But it's not a strict rule, for instance, if you need to toggle something from multiple places it's easier to use redux for that

Upvotes: 3

Related Questions