[Redux] Redux under the hood 리덕스 작동원리

작성일 | In

작동순서

  1. Create and dispatch actions based on the event
  2. Reducers process the actions, computing the new state
  3. The new state of the whole application goes into a single store
  4. Components receive the new state as props and re-render themselves where needed

State Tree

Single source of truth for our date/state. The state tree is read only, meaning we cannot modify or write to it directly. The only way to change it is by dispatching actions.

Actions

An action is a plain JS object to trigger state mutations. They describe what should change, having no idea how to make that change. Actions can optionally carry payload.

Actions are identified by a string called action type. Action types are strings because they need to be serializable.

Reducers

Reducers are pure functions which describe state mutations. They do know the implementation details for those changes.

Reducer composition pattern

Top level reducer will be made out of a bunch of other smaller reducers.

1
2
3
4
const rootReducer = (state, action) => ({
  count: counterReducer(state.counter, action),
  alert: alertReducer(state.alert, action)
});

Store

There can be only one single instance of the store in a Redux app.

What causes Re-render

(뇌피셜)

1
2
3
const mapStateToProps = (state) => ({
  auth: state.auth,
});

State가 store에서 받아온 값이고 여기서 auth만을 추출하여 return하면 이를 props에 추가하여 보내준다. props는 매번 shallow comparison을 통해 re-render를 결정한다.

Reference:
https://medium.com/@fknussel/redux-3cb5aac94a66\