React / 전역 상태 관리 (2) - Redux, Redux Toolkit

Redux

전역 상태 관리를 위한 라이브러리로, flux 규격에 reducer가 결합된 패턴이다. Flux보다 더욱 간단하다는 점이 특징이다.

 

* Flux 패턴

Facebook에서 만든 아키텍처 패턴, 애플리케이션의 데이터 흐름을 단방향으로 유지하기 위한 구조

데이터 흐름 : View → Action → Dispatcher → Store → View 업데이트

 

 

 

Redux의 데이터 흐름

구성요소

• Action : 상태를 어떻게 변화시킬 것인지에 대한 내용을 담은 객체
  ↓
• Dispatch : 액션 객체를 Reducer로 넘겨주는 역할을 하는 함수
  ↓
• Reducer : 리턴하는 값이 새로운 상태가 되는 함수
  여러 개라면 combineReducers 함수로 묶어 하나로 만들 수 있음
• Store : Redux의 전역 상태 저장소, createStore 함수에 Reducer를 전달해 생성

 

만들어진 구성요소는 다음과 같이 사용한다.

1. App과 전역 상태 저장소 연결 (주로 Main.jsx에서)
   <Provider store={store}>
2. useSelector()로 상태 저장소에서 상태 꺼내서 사용
3. useDispatch()로 dispatch 함수 만들어서 사용
   
   

 

+ Flux와 Redux의 차이

 

	Flux	Redux
Dispatcher	반드시 필요	Reducer로 대체
Store	여러 개 존재 가능	1개
State 변경	Store 안에서 직접 변경	불변 상태, Reducer가 새 상태 반환

 

 

Redux-Thunk

액션으로 객체 말고도 함수를 사용할 수 있게 해주는 미들웨어

=> Redux에서 비동기 처리를 할 수 있게 해준다!

 

 

---

 

 

사용 방법

설치

npm i redux react-redux

 

Redux-thunk 설치

npm i redux-thunk

 

 

---

 

 

예시 1 - 기본

App.jsx

import { useSelector, useDispatch } from 'react-redux';
import { combineReducers, legacy_createStore } from 'redux';
import './App.css';

// 액션 객체 정의
const increment = {
  type: 'increment',
};
const decrement = {
  type: 'decrement',
};

// Reducer 정의
// 초기값, action을 파라미터로 설정
const counterReducer = (state = 0, action) => {
  // action의 type에 따라 상태 변경
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
};

// Store 정의, 애플리케이션 전체 상태 관리 객체
// legacy_createStore은 실습용으로 사용... 요새는 redux toolkit을 권장
export const store = legacy_createStore(counterReducer);

function App() {
  // useSelector로 현재 상태를 꺼내옴
  const counter = useSelector((state) => state);
  // useDispatch로 액션을 store로 보냄
  const dispatch = useDispatch();

  // 클릭 시 dispatch()메서드로 액션을 보내 상태 변경!
  return (
    <>
      <div>Counter : {counter}</div>
      <button onClick={() => dispatch(increment)}>+</button>
      <button onClick={() => dispatch(decrement)}>-</button>
    </>
  );
}

export default App;

 

Main.jsx

import { createRoot } from 'react-dom/client';
import './index.css';
import App, { store } from './App.jsx';
import { Provider } from 'react-redux';

createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>,
);

 

 

 

예시 2  - Reducer가 두 개 이상

지금은 reducer가 하나지만 두 개 이상일 경우 combineReducers을 사용해 다음과 같이 관리할 수 있다. 

 

import { useSelector, useDispatch } from 'react-redux';
import { combineReducers, legacy_createStore } from 'redux';
import './App.css';

// 액션 객체
const increment1 = { type: 'increment1' };
const decrement1 = { type: 'decrement1' };

const increment2 = { type: 'increment2' };
const decrement2 = { type: 'decrement2' };

// Reducer1
const counterReducer1 = (state = 4, action) => {
  switch (action.type) {
    case 'increment1':
      return state + 1;
    case 'decrement1':
      return state - 1;
    default:
      return state;
  }
};

// Reducer2
const counterReducer2 = (state = 0, action) => {
  switch (action.type) {
    case 'increment2':
      return state + 2;
    case 'decrement2':
      return state - 2;
    default:
      return state;
  }
};

// combineReducers()로 사용할 Reducer들을 합침
const rootReducer = combineReducers({ counterReducer1, counterReducer2 });

// 생성한 Store에 Reducer들을 합친 rootReducer를 넘겨줌
export const store = legacy_createStore(rootReducer);

function App() {
  // 상태 가져오기(Reducer별로 가져와야함)
  const counter1 = useSelector((state) => state.counterReducer1);
  const counter2 = useSelector((state) => state.counterReducer2);
  // dispatch 함수 가져오기 
  const dispatch = useDispatch();

  return (
    <>
      <div>Counter 1 : {counter1}</div>
      <button onClick={() => dispatch(increment1)}>+</button>
      <button onClick={() => dispatch(decrement1)}>-</button>
      <hr />
      <div>Counter 2 : {counter2}</div>
      <button onClick={() => dispatch(increment2)}>+</button>
      <button onClick={() => dispatch(decrement2)}>-</button>
    </>
  );
}

export default App;

 

 

 

예시 3 - Redux-thunk 사용

1. Thunk를 미들웨어로 적용 => applyMiddleware(thunk)를 통해 store에 기능 추가
2. dispatch에 함수 전달이 가능해짐
   만들어진 함수는 dispatch와 getState를 인자로 받을 수 있는데, 아래 예시에선 안씀
   + getState는 보통 조건적으로 상태를 보고 액션을 결정하고 싶을 때 (ex. counter가 10 미만일 때 액션을 실행하고 싶을 때) 쓰임
3. 함수 안에서 비동기 코드 실행
4. 비동기 작업 완료 후 실제 액션 객체를 dispatch

import { applyMiddleware, combineReducers, legacy_createStore } from 'redux';
import { thunk } from 'redux-thunk';

// 중략

// thunk를 미들웨어로 적용하고, applyMiddleware(thunk)로 store에 기능을 추가한다!
export const store = legacy_createStore(rootReducer, applyMiddleware(thunk));

function App() {
  const counter1 = useSelector((state) => state.counterReducer1);
  const counter2 = useSelector((state) => state.counterReducer2);
  
  // useDispatch로 액션 전송 함수 생성
  const dispatch = useDispatch();
  
  // 2초 뒤 증가시켜주는 함수 
  const imcrement2sec = () => {
    return (dispatch) => {
      // 2초 뒤 increment1을 dispatch한다
      setTimeout(() => {
        dispatch(increment1);
      }, 2000);
    };
  };

  // thunk 덕분에 dispatch가 함수를 인자로 받을 수 있음!! 
  return (
    <>
      <div>Counter 1 : {counter1}</div>
      <button onClick={() => dispatch(imcrement2sec())}>+</button>
      <button onClick={() => dispatch(decrement1)}>-</button>
    </>
  );
}

 

 

 

 

---

 

 

 

Redux Toolkit

Redux를 더 편하게 쓰기 위한 공식 툴킷으로, 요새는 Redux 공식에서도 이 Toolkit을 쓰기를 권장하고 있다.

 

Redux와의 사용 방식 차이

Redux	Redux Toolkit
Action	createSlice
Reducer
Store	configureStore

 

공통으로 사용되는 부분

• <Provider store={store}></Provider>
• useSelector()
• useDispatch()

 

createSlice()

액션 타입, 액션 생성자, Reducer를 한 번에 생성

createSlice({name:'counter', initalState:0, reducers:{
  increment(state, action){state+=1},
  decrement(state, action){state-=1}
}})

 

 

configureStore()

Reducer를 전달받아 전역 상태 저장소를 생성

const store = configureStore({
  reducer:{
    counter:counterSlice.reducer,
    // 여러개일 경우
    any:anySlice.reducer,
    // ... 등등 이렇게 작성해주면 여러 개를 전달해줄 수 있음 
  }
})

 

 

액션 생성자 사용

createSlice에서 정의한 reducers 이름으로 사용

dispatch(counterSlice.actions.increment());

 

 

createAsyncThunk()

Redux toolkit에서 제공하는 Thunk 생성 함수라 따로 설치할 필요가 없으며 Redux-Thunk처럼 비동기 처리가 가능함

- 비동기 로직을 store 외부로 분리

- 인자 : (액션 타입 문자열, 프로미스를 반환하는 비동기 함수, 추가 옵션)

 

 

---

 

 

사용 방법

설치

npm install @reduxjs/toolkit react-redux

 

 

예시 1 - 기본

import { useDispatch, useSelector } from 'react-redux';
import './App.css';
import { configureStore, createSlice } from '@reduxjs/toolkit';

// 상태 + 액션 생성
// createSlice() 사용
const counterSlice = createSlice({
  name: 'counter', // slice의 이름
  initialState: 4, // 초기 상태 값
  reducers: { // 상태 변경 함수들 (reducer + action 역할)
    increment(state, action) {
      return state + 1;
    },
    decrement(state, action) {
      return state - 1;
    },
  },
});

// 스토어 생성
// configureStore() 사용
export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

function App() {
  // store에서 slice의 이름인 counter로 접근해서 상태를 가져옴
  const counter = useSelector((state) => state.counter);
  // 액션을 발생시키는 함수
  const dispatch = useDispatch();
  return (
    <>
      <div>Counter : {counter}</div>
      <button
          // counterSlice.actions는 액션 객체 모음
          dispatch(counterSlice.actions.increment());
        }}>
        +
      </button>
      <button
        onClick={() => {
          dispatch(counterSlice.actions.decrement());
        }}>
        -
      </button>
    </>
  );
}

export default App;

 

 

 

예시 2 - Thunk 사용하기

const IncrementThunk2sec = createAsyncThunk(
  'counter/slowIncrement', // 액션 타입
   // payloadcreator 함수로, 여기서 비동기 작업이 수행 가능
   // value : thunk를 dispatch(IncrementThunk2sec(값))처럼 사용 시 넘기는 값
  (value, { dispatch }) => {
    setTimeout(() => {
      dispatch(counterSlice.actions.increment());
    }, 2000);
  },
);

function App() {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <>
      <div>Counter : {counter}</div>
      <button
        onClick={() => {
          dispatch(IncrementThunk2sec());
        }}>
        +
      </button>
    </>
  );
}

 

 

 

 

 

 

 

이미지 출처
Redux 패턴 : https://qiita.com/dondoko-susumu/items/5a5cb4250b46738c9e48#redux