React Redux 기본

 

React - The Complete Guide (incl Hooks, React Router, Redux)

간략 절차

1. Store에서 모든 State를 관리한다.

2. 그런데 Store의 State를 변경하려면 Reducer라는 놈을 통해서 와라

3. Reducer라는 놈을 통해서 오기전에 Action이라는 놈을 통해서 와라

 

사전지식

 

1. Reducer is a pure function which receives the action and the old state as input and spit out an updated state

 - Reducer는 그냥 js Function이다. 이 Function은 action과 old State를 파라미터로 받고 자기가 Type에 따라서 어떤 로직을 수행하고 state를 update한 뒤 return 해준다. 그런데 이 로직은 반드시 동기(Synchronous)여야 한다.

 

2. Action은 아무것도 하지 않는다, 그냥 Reducer로 가기 위한 메신저다.

 

말로 풀어서

React Component에서 Action으로 Dispatch(보내다) 한다. 그럼 Action에서 "아! 이 Component에서 보낸 Type은 xxx이구나!", "action(정확히는 action Type)과 old State를 파라미터로 가지는 Reducer야 여기 action과 old state를 줄테니 new State를 반환해다오" 

 

그러면 Reducer가 update를 하고 "야 방금 나한테 요청한 Component 누구냐?? update 했으니깐 받아가라~ triger"