Redux: When Should I Keep Track of State and When Should I Not?

Question

NOTE: I am new with the whole concept of state management. I never got into the older languages that "explicitly used" states.

I dived into React and Redux for the past week, and as I'm getting into more complicated code, I stumbled across one thing:

I now have to sync the UI changes with the Redux state for even the most trivial actions.

Given a Todo list that can be filtered with a URL param: localhost:3000/SHOW_COMPLETED, after modifying a container to show completed todos I also have to modify reducers to alter the data in the Redux state tree shaped as {todos: [Todo1], filter: SHOW_COMPLETED} on every LOCATION_CHANGE action by the router (react-router-redux).

That's an additional code for merely displaying todos. Imagine how that would blow up once I get into more complicated stuff.

I wanna get in on that Unidirectional Data Flow but do I have to modify the state tree for every trivial action my app does?

Answer 1

Redux should hold "persisted" app state. By persisted I mean state that persists across component mounting/dismounting. This tends to be things like user data and application data that has been fetched from the server.

Any transient UI state in the component should be kept in React component state (using this.state and this.setState). This state will be reset when the component is dismounted. An example of transient state is a dropdown component with open and closed as the state.