Redux Data Flow

Redux Data Flow

Here is how data flows in Redux:

1. Initial State is renderd in the UI

2. An event is fired (user clicks a button)

3. The event handler calls the dispatch() function

4. The dispatch() function sends the action to the reducer() function

5. The reducer() function returns a new state with updated value

6. The new state is passed to the UI which reflects the changes.

Redux data flow

Redux Key Principle

1. Single source of truth: The global state of your application is stored in an object tree within a single store.

2. State is read-only: The only way to change the state is to emit an action, an object describing what happened.

3. Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers.

Redux Predictability