React-Native: when to go for redux state and react

Question

I have implemented redux in my application. My scenario is when navigating from one component to another component, I'm updating the redux state. So when I come back to the previous component, getting the last redux state data.

Expected Result:

When I come back to previous component, need to be in same state. I don't want the recent changes data.

Ex:  Marie ->April, when I go back,  Marie <- April

Actual Result:

Its updating the recent changes data.

Ex:  Marie ->April, when I go back, April <- April

How could I write a app structure for this? Is it redux needed here? or Should I manage along with component state by passing as a params when navigating?

Answer 1

It’s good to know which to use when.

Duration

Different pieces of state are persisted for different amounts of time. I loosely categorize time into these groups:

Short term: data that will change rapidly in your app - store this type of data in local React state

Medium term: data that will likely persist for a while in your app - store the state in the Redux store

Long term: data that should last between multiple visits to your site - stored somewhere else likely to a database on a server or into local storage

check here for more info: React State vs Redux State When and Why?

Answer 2

If the data is required in more than one class then use redux state else use react state, it depends upon the lifecycle of the component. As redux state is global and react state is active for only in the class within which it is defined. According to your condition you can use redux state for the first component as you will comeback to it and you want Marie as your data and use react state for the second component as you want April as your data.

Answer 3

I'm not sure if my answer is the correct way of implementation. But currently, I'm doing it like this:

State of a component can be scattered through multiple locations (ex: this.state, class's fields, a global object or Redux).

What I understand from your question is that you are dealing with 2 requirements simultaneously:

• Part of the state of the component needs to be preserved when navigating back and ford.
• Another part of the state of the component needs to be shared with other components (stay the same) when navigating back and ford.

I am not aware of a single solution for both requirements. If I have to do it I will design the state of the component in such a way that it is distributed or scattered through different locations each serves its own purposes. Basically, I use 2 different solutions:

1. Part of the state which needs to be preserved will be put in this.state.
2. Part of the state which needs to be shared will be put in Redux.

For this solution to work, I do not use react-redux, only redux. In redux there is a method called store.getState() which will return the single Redux state object. I make the store read-only-accessible globally and use it to render parts of the component that need the shared data.