REDUX

REDUX를 사용했을 때의 데이터 흐름
: 전역 상태를 관리할 수 있는 저장소인 Store를 제공함으로써 흐름이 깔끔해진다.

◎REDUX의 구조

• 상태관리 순서

  1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action객체가 생성된다.
  2. 이 Action객체는 Dispatch함수의 인자로 전달된다.
  3. Dispatch함수는 Action객체를 Reducer함수로 전달해준다.
  4. Reducer함수는 Action객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다.
  5. 상태가 변경되면, React는 화면을 다시 렌더링한다.

  => Action -> Dispatch -> Reducer -> Store(Model)
  => FLUX패턴
  

• Store
  : 상태가 관리되는 오지 하나뿐인 저장소의 역할
  -createStore메서드를 활용해 Reducer를 연결해서 Store를 생성

    import {createStore} from ‘redux’;
    const store= createStore(rootReducer);

• Reducer
  : Dispatch에게서 전달받은 Action객체의 type값에 따라서 상태를 변경시키는 함수

   const count = 1
   // Reducer를 생성할 때에는 초기 상태를 인자로 요구한다.
  const counterReducer = (state = count, action) => {
     // Action 객체의 type 값에 따라 분기하는 switch 조건문이다.
    switch (action.type) {
      case 'INCREASE':  //action === 'INCREASE'일 경우
  			return state + 1
      case 'DECREASE':   // action === 'DECREASE'일 경우
  			return state - 1
      case 'SET_NUMBER':  // action === 'SET_NUMBER'일 경우
  			return action.payload
      default:  // 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
        return state;
  	}
  }

  => 이때, Reducer는 외부요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야 하기 때문에 순수함수여야한다.

• Action
  : 어떤 액션을 취할 것인지 정의해놓은 객체
  -type은 해당 Action객체가 어떤 동작을 하는지 명시해주는 역할 이기때문에 필수로 지정해주어야 한다.
  -대문자와 snake case로 작성한다.
  -필요에 따라 payload를 작성해 구체적인 값을 전달한다.

  // payload가 필요 없는 경우
  { type: 'DECREASE' }
  // payload가 필요한 경우
  { type: 'SET_NUMBER', payload: 5 }

  • 액션생성자(Action creator) : Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많다.

    // payload가 필요 없는 경우
    const decrease = () => {
     return {
       type: 'DECREASE'
     }
    }
    // payload가 필요한 경우
    const setNumber = (num) => {
     return {
       type: 'SET_NUMBER',
       payload: num
     }
    }

• Dispatch
  : Reducer로 Action을 전달해주는 함수
  => Dispatch의 전달인자로 Action객체가 전달된다.

  // Action 객체를 직접 작성하는 경우
  dispatch( { type: 'DECREASE' } );
  dispatch( { type: 'SET_NUMBER', payload: 5 } );
  // 액션 생성자(Action Creator)를 사용하는 경우
  dispatch( decrease() );
  dispatch( setNumber(5) );

• Redux hooks
  : react-redux에서 Redux를 사용할때 활용할수 있는 hooks메서드를 제공한다.

  • useDispatch()
    : Action객체를 Reducer로 전달해주는 Dispatch함수를 반환하는 메서드

    import { useDispatch } from 'react-redux'
    const dispatch = useDispatch()
    dispatch( decrease() )
    console.log(counter) // 0
    dispatch( setNumber(7) )
    console.log(counter) // 7

  • useSelector()
    : 컴포넌트와 state를 연결하여 Redux의 state에 접근할수있게 해주는 메서드

    import { useSelector } from 'react-redux'
    const counter = useSelector(state => state)
    console.log(c◎ounter) // 1

---

◎Redux의 세가지 원칙

1. Single source of truth
   Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간있다는 원칙이다.
2. State is read-only
   상태는 읽기 전용
   => Redux의 상태는 직접 변경할 수 없음을 의미한다.
   => Action 객체가 있어야만 상태를 변경할 수 있다는 원칙이다.
3. Changes are made with pure functions
   Reducer는 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야한다는 원칙이다.

출처
코드스테이츠