React _ Redux

Redux의 구조

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

즉, 데이터가 Action → Dispatch → Reducer → Store 순으로 단방향으로 흐르게 된다 .

Action

어떠한 액션을 취할 것인가를 정의해 놓은 객체이다.

// 어떤 액션을 취할 것인지를 정의해놓은 객체이다.
{type : 'INCREASE'}

// 보통은 Action 객체를 생성하는 함수(액션 생성자)를 만들어 사용한다. 
const increase = (num) => {
  return {
    type : 'INCREASE' 
    payload: num
 }
}

Action 객체 작성 시 type을 필수로 지정해주어야 한다.

type은 Action 객체가 어떤 동작을 하는지 명시해주는 역할을 하며, 대문자와 Snake Case로 작성한다.

필요에 따라 payload를 작성해 구체적인 값을 전달하기도 한다.

(payload →액션의 실행에 필요한 임의의 데이터)

Dispatch

Reducer로 Action을 전달해주는 함수이다. 전달인자로는 Action 객체가 전달된다.

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

// 액션 생성자를 사용하는 경우
dispatch(increase());   //payload 없는 경우
dispatch(increase(5));  //payload : 5 인 경우

Action 객체를 전달받은 Dispatch 함수는 Reducer을 호출한다.

Reducer

Dispatch에게서 전달받은 Action 객체의 type에 따라서 상태를 변경시키는 함수이다.

 const count = 1;

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

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

case 'INCREASE':
  return state+1;

case 'DECREASE':
  return state-1;

case 'SET_NUMBER':
  return action.payload;

// 해당 되는 경우가 없을 때는 기존의 상태를 그냥 리턴한다.
default:
  return state;
}

이 때의 Reducer은 순수함수여야 한다. 즉, 외부의 요인에 의해 엉뚱한 값으로 상태가 변경되는 일이 없어야 한다.

만일, 여러 개의 Reducer을 사용하는 경우, Redux의 combineReducers 메서드를 사용해 하나의 Reducer로 합쳐줄 수 있다.

import {combineReducers} from 'redux';

const rootReducer = combineReducers({
  countReducer,
  anyReducer,
  ....
})

Store

상태(state)가 관리되는 오직 하나뿐인 저장소의 역할을 한다.

// 생성
import {createStore} from 'redux';

const store = createStore(rootReducer);

createStore 메서드를 Reducer과 연결해서 Store을 생성할 수 있다.

Redux Hooks

Redux Hooks는 React에서 Redux를 사용할 때 활용할 수 있는 Hooks 메서드를 제공한다.

useSelector()

import {useSelector} from 'react-redux';

const counter = useSelector(state => state.counterReducer)
console.log(counter)

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

useDispatch()

import {useDispatch} from 'react-redux';

const dispatch = useDispatch()
dispatch(increase());
dispatch(setNumber(2));

Action 객체를 Reducer로 전달해주는 메서드이다. 위에서 사용했던 dispatch 함수도 useDispatch()를 사용한 것이다.

Redux의 세 가지 원칙

1. Single source of truth

동일한 데이터는 항상 같은 곳에서 가지고 와야 한다. 즉, 데이터를 가지고 올 때는 Redux의 데이터를 저장하는 단 하나뿐인 공간인 Store에서 가지고 와야 한다.

1. State is read-only

state는 읽기 전용이라는 뜻으로, React에서 state 갱신 함수로만 state를 변경할 수 있었던 것 처럼 Redux의 state도 직접 변경할 수 없음을 의미한다. Redux에서는 Action 객체가 있어야만 상태를 변경할 수 있다.

1. Changes are made with pure functions

변경은 오직 순수함수로만 가능하다는 뜻으로, state가 엉뚱한 값으로 변경되는 일이 없도록 Reducer을 순수함수로 작성해야 한다는 의미이다.