# 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&#x20;
6. The new state is passed to the UI which reflects the changes.

<figure><img src="https://109962327-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MC0Wq3Hv_Fc0WRkNF0M%2Fuploads%2FtfjqOvXkJOMLODazLyHK%2FScreenshot%20(501).png?alt=media&#x26;token=15721c1d-9ef0-4c1b-ad7f-4cc937ec8050" alt=""><figcaption><p>Redux data flow</p></figcaption></figure>

## 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.

<figure><img src="https://109962327-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MC0Wq3Hv_Fc0WRkNF0M%2Fuploads%2FyK8NMIyZi01caNpB8zi1%2FScreenshot%20(502).png?alt=media&#x26;token=dfd159ef-0d38-4147-b80f-9c244b06d09a" alt=""><figcaption></figcaption></figure>

## Redux Predictability

<figure><img src="https://109962327-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MC0Wq3Hv_Fc0WRkNF0M%2Fuploads%2Fp81NZ7QFOe5qQ82Vyeaq%2FScreenshot%20(505).png?alt=media&#x26;token=c7d88ff2-de0d-4081-83fe-4c6faa1b9370" alt=""><figcaption></figcaption></figure>
