Redux 사용하기

Redux 란 ?
javaScript 애플리케이션에서 상태를 관리하는 라이브러리 중 하나

데이터 흐름을 예측 가능하게 만들어 애플리케이션의 상태 변화를 추적하고 디버깅하기 쉽게 해줌


Redux 구성요소

액션(Action)	리듀서(Reducer)	스토어(Store)	디스패처(Dispaatcher)
상태를 변경하기 위한 정보를 가지고 있는 메세지 , 액션은 객체 형태로 작성되며  필수적으로 'type' 프로퍼티를 가지고 있어야 함	상태를 변경하는 로직을 담당함.  리듀서는 이전 상태와 액션을 받아서 새로운 상태를 반환하는 순수함수임	상태를 저장하고 관리함.  스토어는 애플리케이션의 상태를 담고 있으며, 상태를 변경하는 유일한 방법은 액션을 디스패치하는 것임	액션을 전달하는 역할을 수행 . 디스패처는 단 하나만 존재하며 액션을 등록한 콜백 함수를 실행함

+ 부가적인 구성요소

액션 생성자(Action Creator)	미들웨어(Middleware)
액션을 생성하는 함수로 스토어에 디스패치할 수 있는 액션 객체를 반환함	액션을 디스패치할 때마다 실행되는 함수. 미들웨어를 사용하면 액션을 처리하기 전에 특정 작업을 수행하거나 액션을 가로채서 다른 작업을 수행할 수 있음

Redux 작동 방식 

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

Action -> Dispatch -> Reducer -> Store 순서로 데이터가 단방향으로 흐르게 됨 

Redux 맛보기

Store

createStore 메서드를 활용해 reducer를 연결해서 Store를 생성할 수 있음 

import { createStore } from 'redux';

const store = createStore(rootReducer);

 

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가 리턴하는 값이 새로운 상태가 됩니다.

---

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

import { combineReducers } from 'redux';

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

 

Action

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

type은 필수로 지정해줘야함.  필요에 따라 payload 를 작성해 구체적인 값을 전달함 

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

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

보통 Action을 직접 작성하기보다는 Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많음 이러한 함수를 액션 생성자(Action Creator)라고도 함 . 

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

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

 

Dispatch 

Reducer로 Action을 전달해주는 함수 , Dispatch의 전달인자로 Action 객체가 전달됨 

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

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

 

---

Redux Hooks 

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

 

useDispatch() 

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

import { useDispatch } from 'react-redux'

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

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

 

useSelector()

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

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

---

Redux의 세가지 원칙

1. Single source of truth
동일한 데이터는 항상 같은 곳에서 가지고 와야함 즉 Redux에는 데이터를 저장하는 Store라는 단 하나의 공간과 연결되어야 함 

2. State is read-only 
상태는 읽기 전용, React에서 상태 갱신 함수로만 상태를 변경할 수 있었던 것 처럼 Redux의 상태도 직접 변경할 수 없음 . Action 객체가 있어야만 상태를 변경할 수 있음 

3. Changes are made with pure functions 
변경은 순수함수로만 가능하다는 뜻 

 

---

Flux 패턴 ?
페이스북에서 개발한 애플리케이션 아키텍처 패턴 중 하나임
단방향 데이터 흐름을 가지고 있어 복잡한 데이터 흐름에서 발생할 수 있는 문제들을 해결하는데 유용함

1. View: 사용자가 보는 화면을 담당하는 컴포넌트입니다.
2. Action: 상태를 변경하기 위한 정보를 담고 있는 객체입니다.
3. Dispatcher: Action을 등록하고 Store에 전달하는 역할을 합니다.
4. Store: 애플리케이션의 상태(state)를 담고 있으며, 상태 변경과 관련된 로직을 수행합니다.
5. Controller View: View와 Store 사이에서 중간 역할을 수행합니다. View에서 발생한 이벤트를 Dispatcher를 통해 Action으로 전달하고, Store에서 발생한 상태 변경 이벤트를 View에 전달합니다.