[React]Redux 사용방법

⭐ 설치방법

npm i redux react-redux
npm i redux

 

✔️ 프로젝트 구조

• redux 폴더 - 리덕스 관련 파일 저장
• config 폴더 - 리덕스 설정 관련 파일 저장
  • configStore - 상태 관리하는 곳. rootReducer 존재함
• modules 폴더 - 기능별로 나눠서 저장

 ⭐기본세팅

✔️ /src/redux/config/configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({});
const store = createStore(rootReducer);

export default store;

createStore()

: 스토어를 만드는 함수. 프로젝트 전체에 하나만 존재하므로 이 파일말고 다른데서 쓰일 일 없음.

combineReducers()

: redux는 action -> dispatch -> reducer 순서로 동작함.

reducer를 기능 별로 나누어서, 여러 개의 reducer를 하나의 상태 객체로 만들어주는 함수.

 

✔️ /src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

 

App을 Provider로 감싸주고 Provider에 store를 넣어준다.

이렇게 기본 세팅이 🚨완료🚨되었다.

 

⭐ Ducks 패턴

• Ducks 패턴은 리덕스 사용 방법에 대한 패턴이다.
• 액션 타입, 액션 생성 함수, 리듀서를 하나의 모듈처럼 한 파일 안에 작성하는 패턴이다.
• 하나의 기능을 수정할 때, 한 파일 안에서 수정 가능하다는 장점이 있다.

✔️ Ducks 패턴의 규칙

1. MUST export default a function called reducer()
   반드시 리듀서 함수를 default export해야 한다.
2. MUST export its action creators as functions
   반드시 액션 생성 함수를 export해야 한다.
3. MUST have action types in the form npm-module-or-app/reducer/ACTION_TYPE
   반드시 접두사를 붙인 형태로 액션 타입을 정의해야 한다.
4. MAY export its action types as UPPER_SNAKE_CASE, if an external reducer needs to listen for them, or if it is a published reusable library
   (필수❌) 외부 리듀서가 모듈 내 액션 타입을 바라보고 있거나,
   모듈이 재사용 가능한 라이브러리로 쓰이는 것이라면
   액션 타입을 UPPER_SNAKE_CASE 형태로 이름 짓고 export 하면 된다.

⭐ 예제

✔️ /src/modules/ex.js

간단한 카운터 예제

//Ducks 패턴을 따름

//액션 타입
const INCREASE = "counter/INCREASE";
const DECREASE = "counter/DECREASE";

//액션 생성 함수
export const increase = () => ({ type: INCREASE });
export const decrease = () => ({ type: DECREASE });
//Ducks 패턴에서는 액션 타입을 정의할 때 위처럼 접두사를 붙임(다른 모듈과 이름 중복되지 않기 위해서)

//모듈 초기 상태
const initialState = {
  number: 0,
};

//reducer
export default function counter(state = initialState, action) {
  switch (action.type) {
    case INCREASE:
      return {
        ...state,
        number: state.number + 1,
      };
    case DECREASE:
      return {
        ...state,
        number: state.number - 1,
      };
    default:
      return state;
  }
}

 

✔️ configStore.js 수정

import { createStore } from "redux";
import { combineReducers } from "redux";
import ex from "../modules/ex.js";

const rootReducer = combineReducers({ ex });
const store = createStore(rootReducer);

export default store;

⭐ 컴포넌트에서 사용하는 방법

import "./App.css";
import { useSelector } from "react-redux";

function App() {
  const number = useSelector((state) => state.ex.number);
  return (
    <div className="App">
      <header className="App-header">{number}</header>
    </div>
  );
}

export default App;

useSelector 훅을 사용해서 접근 할 수 있다.

위의 코드를 실행한다면 초기 값인 0을 가져오는 걸 확인할 수 있다!