redux의 구조

redux의 데이터 흐름

---

Redux는 다음과 같은 순서로 상태를 관리합니다.

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

Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다.

 

Store

---

• Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할을 합니다.
• Store는 단일 객체 트리 구조를 사용하며 애플리케이션에서 사용되는 모든 데이터를 포함합니다.
• 객체 트리의 모든 객체는 직접적인 변경이 불가능하기에 불변성을 유지하며, 변경이 필요한 경우 reducer에서 새로운 객체를 생성하여 상태를 업데이트합니다.
• createStore 메서드를 활용해 Reducer를 연결해서 Store를 생성할 수 있습니다.
• 다른 컴포넌트에서 redux의 상태를 사용하고 싶다면 해당 컴포넌트를 Provider컴포너트로 감싸서 사용할 수 있습니다.

import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(Reducer);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

 

 

Reducer

---

• Reducer는 순수함수로, Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수입니다.
• 두개의 인자로 구성되어 있으며, 첫번째 인자에는 state가, 두번째 인자에서는 action을 받는다. 이때 state에 초기값을 줄 수 있다.
• action은 action.type으로 조건문을 실행하고, 만약 정해진 입력아닌 사용자가 직접 내용을 전달한다면 action.payload로 받는다.
  

const count = 1

// Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
const Reducer = (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

---

• Action은 상태에 어떤 액션을 취할 것인지 정의해 놓은 객체로,  type 은 필수로 지정을 해 주어 상태가 어떤 동작을 하는지를 dispatch를 통해 reducer에 전달합니다.
• 보통 대문자와 Snake Case로 작성하며, 상태의 동작은 type속성에 , 필요에 따라 payload속성을 작성해 구체적인 값을 전달합니다
• Action을 직접 dispatch에 작성하기보다는 Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많으며,이러한 함수를 액션 생성자(Action Creator)라고도 합니다.

const increase = () => {
  return {
    type: 'INCREASE'
  }
}

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

 

 

 

Dispatch

---

• Dispatch는 Reducer로 Action을 전달해 주는 함수입니다.
• Dispatch 전달인자로 Action 객체를 가지며, Reducer를 호출합니다.

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

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

• 보통 그냥 사용하지 않고, Redux Hooks의 useDispatch()를 이용한다. 

import { useDispatch } from 'react-redux'

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

 

 

useSelector

---

• Redux Hooks 중 하나인 useSelector는 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드입니다.

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