redux 사용법

✍🏻 redux란 무엇일까요?

프론트엔드 개발자들은 'redux'를 전역 상태관리 라이브러리라고 많이 표현합니다. 전연 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리이기 때문입니다.

 

redux 기본사용법

1) redux 설정

- redux 설치하기

터미널에 설치명령어 입력하기

react-redux는 redux를 react에서 사용할 수 있도록 서로 연결시켜 주는 패키지입니다.

yarn add redux react-redux

 

 

1. src 폴더 안에 redux 폴더생성

2. redux 폴더 안에 config, modules 폴더 생성

3. config 폴더 안에  configStore.js 파일 생성

 

각각 폴더와 파일의 역할

- redux: redux와 관련된 코드를 모두 모아 놓을 폴더

- config: redux 설정과 관련된 파일을 모아 놓을 폴더

- configStore: 중앙 state 관리소인 Store을 만드는 설정코드들이 있는 파일

- modules: 만들 State들의 그룹

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2) 설정코드 작성

src/configStore.js에 

import { combineReducers, createStore } from "redux";
import counter from "../modules/counter";

// 1. rootReducer 만들기
const rootReducer = combineReducers({ counter });

// 2. store 생성
const store = createStore(rootReducer);

// 3. 만든 store 내보내기
export default store;

 그다음 디렉토리의 가장 최상단이 있는 main.jsx에서 

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { Provider } from "react-redux";
import store from "./redux/config/configStore.js";

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

 Provider로 <APP />을 감싸주고 store를 넣어줍니다.

 

3) 모듈 만들기

위 사진과 같이 버튼을 누르면 카운트가 되는 간단한 기능을 만들어보겠습니다!

1. modules 폴더에 counter.js 파일을 생성한다.

2. 코드 작성

// 초기 상태값 (꼭 객체가 아니여도 됨)
const initialState = {
  number: 0,
};

// 리듀서 함수
// action type을 가지고있는 객체
const counter = (state = initialState, action) => {
  switch (action.type) {
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      };
    case "MINUS_ONE":
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};

export default counter;

 

4) 액션 객체 보내기

액션객체를 리듀서로 보내기 위해서는 useDispatch라는 훅을 사용하여 보내야 합니다.

useDispatch 훅을 사용하기 위해서는 컴포넌트 안에서 아래와 같이 먼저 코드를 작성해서 dispatch라는 변수를 생성해주어야 합니다.

  const dispatch = useDispatch();

 그리고 return부분에 작동할 버튼을 만들어 이벤트를 만들어 dispatch를 실행시켜줍니다.

 return (
    <>
      {counterReducer.number}
      <button
        onClick={() => {
          dispatch({
            type: "PLUS_ONE",
          });
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          dispatch({
            type: "MINUS_ONE",
          });
        }}
      >
        -1
      </button>
    </>
  );
}

완성!