Redux Data flow

아래는 one-way data flow에 대한 설명이다.

• state: the source of truth that drives our app;

• view: a declarative description of the UI based on the current state

• actions: the events that occur in the app based on user input, and trigger updates in the state

one-way data flow steps

1. State describes the condition of the app at a specific point in time

2. The UI is rendered based on that state

3. When something happens (such as a user clicking a button), the state is updated based on what occurred

4. The UI re-renders based on the new state

위와 같은 one-way data flow는 여러 컴포넌트에서 같은 state를 사용할 시 문제가 발생할 수 있다.

이러한 문제 해결을 위해 state를 컴포넌트 밖에(global) centralize하여 사용한다.

This is the basic idea behind Redux:
a single centralized place to contain the global state in your application, and specific patterns to follow when updating that state to make the code predictable.

Redux data flow steps

• Initial setup:
  • A Redux store is created using a root reducer function.
  • The store calls the root reducer once, and saves the return value as its initial state.
  • When the UI is first rendered, UI components access the current state of the Redux store, and use that data to decide what to render. They also subscribe to any future store updates so they can know if the state has changed.
• Updates:
  • Something happens in the app, such as a user clicking a button.
  • The app code dispatches an action to the Redux store, like dispatch({type: 'counter/increment'}).
  • The store runs the reducer function again with the previous state and the current action, and saves the return value as the new state.
  • The store notifies all parts of the UI that are subscribed that the store has been updated.
  • Each UI component that needs data from the store checks to see if the parts of the state they need have changed.
  • Each component that sees its data has changed forces a re-render with the new data, so it can update what's shown on the screen.

정보 출처

• https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts#redux-terms-and-concepts