[개발자되기: Redux] Day-40

Redux

Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐른다

Action

어떤 액션을 취할 것인지 정해놓은 객체

// payload가 필요 없는 경우
{ type: 'INCREASE' }

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

Action Creater

Action 객체를 생성하는 함수를 만들어 사용

// payload가 필요 없는 경우
const increase = () => {
  return {
    type: 'INCREASE'
  }
}

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

Dispatch

Reducer로 Action을 전달해주즌 함수

// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );

// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );

Reducer

Dispatch에게서 전달받은 Action객체의 type값에 따라 상태를 변경시키는 함수
외부요인에 의해 엉뚱한 값으로 상태가 변경되는 일이 없도록 Reducer는 순수함수여야함

const count = 1

// Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
const counterReducer = (state = count, action) {

  // Action 객체의 type 값에 따라 분기하는 switch 조건문입니다.
  switch (action.type)

    //action === 'INCREASE'일 경우
    case 'INCREASE':
			return state + 1

    // action === 'DECREASE'일 경우
    case 'DECREASE':
			return state - 1

    // action === 'SET_NUMBER'일 경우
    case 'SET_NUMBER':
			return action.payload

    // 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
    default:
      return state;
}
// Reducer가 리턴하는 값이 새로운 상태가 됩니다.

combineReducers

여러개의 Reducer를 사용하는 경우 combineReducers메서드를 사용하여 하나의 Reducer로 합쳐줄 수 있음

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  counterReducer,
  anyReducer,
  ...
});

Store

상태가 관리되는 오직 하나뿐인 저장소
Redux앱의 state가 저장되어있는 공간

import { createStore } from 'redux';

const store = createStore(rootReducer);

---

Redux Hooks

Action, Reducer, Dispatch, Store 개념들을 연결시켜 줌

useSelector()

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

// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러옵니다.
import { useSelector } from 'react-redux'
const counter = useSelector(state => state.counterReducer)
console.log(counter) // 1

useDispatch()

Action 객체를 Reducer로 전달해주는 메서드

import { useDispatch } from 'react-redux'

const dispatch = useDispatch()
dispatch( increase() )
console.log(counter) // 2

dispatch( setNumber(5) )
console.log(counter) // 5

---

Redux의 세 가지 원칙

1. Single source of truth

동일한 데이터는 항상 같은 곳에서 가지고 와야 함

2. State is read-only

상태는 읽기 전용. Redux는 상태를 직접 변경할 수 없으며 Action객체가 있어야만 변경할 수 있음

3. Changes are made with pure fuctions

변경은 순수함수로만 가능함

Redux 공식문서 : https://redux.js.org/