아래 글보다 복잡하고 어려운 Redux 적응기에 들어가서 정독하시는 것이 더 좋습니다.

Redux

💡 전역 상태에서 관리하는 저장소 store제공

3가지 원칙:

1. Single source of truth: 하나의 Store만 가진다
2. State is read-only: 상태는 읽기 전용. Action 객체가 있어야 변경 가능
3. Changes are made with pure function: 순수함수로 새로운 state object를 return

작동방식

1. 상태가 변경되는 이벤트 발생, 변경 상태가 저장된 Action 객체 생성
2. Action객체가 Dispatch함수의 인자로 전달
3. Dispatch함수는 Action객체를 Reducer함수로 전달
4. Reducer함수는 Action객체의 값 확인 후, 그 갑에 따라 전역 상태 저장소 Store의 상태 변경

작성 방법

1. 전역으로 Store을 생성한다

   import { Provider } from 'react-redux';
   import { legacy_createStore as createStore } from 'redux';
   
   const store = createStore(rootReducer) // reducer 모음집
   
   root.render(
   	<Provider store={store}>
   	  <App />
     </Provider>
   )

2. Reducer로 어떤 Action을 받으면 무엇을 진행할 지 적는다

   // state들 어가는 곳에 전역 상태를 집어 넣음
   const gloablState = {.......생략}
   
   const rootReducer = (state = globalState, action) => {
     // Action 객체의 type 값에 따라 분기하는 switch 조건문입니다.
     switch (action.type) {
       //action === 'SOME'일 경우
       case 'SOME':
         return state + 'SOME~'
   
       // 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
       default:
         return state;
     }
     // Reducer가 리턴하는 값이 새로운 상태가 됩니다.
   };

3. Action은 dispatch가 어떤 움직임을 감지할 지 정해주는

   const some = () => {
     return {
       type: 'SOME',
   		payload: 1 // 객체든 배여일든 원시값이든 넣어서 전달하는 곳
     };
   };

4. useDipatch로 어떤 함수가 호출되었을 때 dispatch 안에 action인자를 넣어서 reducer로 넣어줌

   import { useDispatch } from 'react-redux';
   
   const dispatch = useDispatch();
   const something = () => {
       dispatch(some());
     };

5. useSelector는 컴포넌트가 Redux의 state에 접근할 수 있게 해줌

   import { useSelector } from 'react-redux'
   
   const state = useSelector(state => state.gloablState // 전역 상태를 불러오고
   // 아래에서 필요에 따라 useState든 아님 다른 구조 분해 할당을 하는 방식으로 진행

(기록용)과제하면서 그렸던 도식

Flux 패턴

기존에는 하나의 컨트톨러 아래에 여러 model이 있고 각 model아래에 view가 하나씩 있었지만 model과 view의 데이터가 양방향으로 주고 받음. 그러다보니 아래와 같은 현상이 일어남

그.래.서.

Flux라는 형태를 만들어서 단방향 흐름이면서 action을 받으면 dispatcher가 store에 저장하고 view로 넘어가고 다시 action을 받아오는 형태로 만듦