React State and Redux State

React State

• Stored locally within the component
• Share with other component through props
• The state can be changed by subcomponent by passing a callback to handle the change into the subcomponents

Redux State

• Stored globally
• Need to subscribe the store to access the state (use container components)
• The data is centralized so it's easy for the components to get state.

React or Redux?

Use cases

• I want the characters present in a text field as the user types -> React
• I want to filter a list of items -> React
• I want to enable or disable the submit button when the item saved -> React
• If a user submits a form updating their profile information -> Redux
• I want to store that request from server locally for rendering and use in many components -> Redux

Should Redux

Breadth of Use

• More components need to access the state, more benefits to using the Redux store
• The state is isolated to a specific component, React state may be a better option

Depth of passing down props

• Many layers between the components (component-subcomponent) -> store the state in Redux and use container component is easier.

Tracking Changes

• Undo/redo
• Replay the events