Redux

---

Redux 는 중앙 state 관리소에서 state를 관리할 수 있도록 도와주는 전역 상태관리 라이브러리. 이다.

💡 성능 최적화
: 상태 변경 시 관련된 컴포넌트만 선택적으로 업데이트 가능.

💡 상태 로직의 중앙화와 일관성
: 상태 로직이 중앙에서 관리되어 일관성 있고 예측 가능한 상태 변경이 가능.

💡 강력한 미들웨어와 개발 도구
: 다양한 미들웨어를 지원하여 비동기 작업, 로깅, 상태 변경에 대한 추가 처리 등 복잡한 기능 구현 가능.

🧸 Redux Setting

➀ redux 설치

yarn : yarn add redux react-redux
npm : npm install redux react-redux

➁ 폴더 구조 setting

src 폴더 > redux 폴더 > config 폴더 > configStore.js
src 폴더 > redux 폴더 > modules 폴더 > stateName.js

✔️ modules 폴더 내부에 관리할 state 파일 생성.

③ configStore.js 파일 setting

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

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

export default store;

✔️ createStore() : 리덕스의 가장 핵심이 되는 스토어를 만드는 메서드.
✔️ combineReducers() : 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 생성.

④ main.jsx 파일에 setting

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(
    <React.StrictMode>
  	  <Provider store={store}> 
    	<App />
  	  </Provider>
    </React.StrictMode>
);

✔️ App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.

🧸 Module 생성 및 연결

➀ module 생성하기

Modules 폴더 > counter.js 파일 생성

const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter;

✔️ initialState : state의 초기 상태값 .
✔️ Reducer : 변화를 일으키는 함수 .
✔️ 모듈파일에서는 리듀서를 export default 한다.

➁ module 연결하기

/src/redux/config/configStore.js

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

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

export default store;

✔️ 생성한 module 파일 import 해주기.
✔️ combineReducers 에 생성한 module 파일의 reducer 추가해주기.

🧸 Store의 State 값 조회

/src/App.js

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
  // const counterStore = useSelector((state) => state);
  // { counter : {number : 0} }
  const number = useSelector((state) => state.counter.number); 
  // 0

  return <div></div>;
}

export default App;

✔️ 사용할 component 에서 useSelector 훅을 사용하여 store 조회.

🧸 State 값 변경

➀ Reducer가 state값 변경

/src/modules/counter.js

const initialState = {number: 0};

const counter = (state = initialState, action) => {
  switch (action.type) {
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      };
    default:
      return state;
 }};

export default counter;

✔️ dispatch 로부터 전달받은 action의 type 이 "PLUS_ONE" 일 때 state + 1 실행.

➁ dispatch 통해서 액션객체 전송

/src/App.js

import React from "react";
import { useDispatch, useSelector } from "react-redux";

const App = () => {
  const dispatch = useDispatch();

  const number = useSelector((state) => state.counter.number); 

  return (
    <div>
      {number}
      <button onClick={() => {dispatch({ type: "PLUS_ONE" });}}>
        + 1
      </button>
    </div>
  );
};

export default App;

✔️ useDispatch() 통해서 dispatch 생성한 후 dispatch 로 액션 객체 전송.