1. Redux 설치

# NPM
npm install redux

# Yarn
yarn add redux

• Redux는 react만을 위한 라이브러리가 아니기 때문에 상위 명령어로 Redux를 설치한 후 다음과 같이 React-redux를 설치해야한다.

2. React-redux 설치

# NPM
npm install react-redux

# Yarn
yarn add react-redux

useDispatch, useSelector를 사용하기 위해 상위 명령어로 React-redux까지 설치 해준다.
※ 만약 redux-toolkit을 설치하고 configureStore를 import하는게 아닌 createStore import 시
취소선이 나오게 되는데 이에대한 해결 방법으로 아래와 같은 방법이 있다.

• 취소선을 그대로 유지한채 사용하기 (취소선이 있어도 영향없음)
• Redux에서 제시하는 configureStore()를 사용하기
• import { legacy_createStore as createStore } from "redux"; 로 사용하기

3. index.js 설정

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./Redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));

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

4. store.js 설정

<-- store.js -->
import { legacy_createStore as createStore } from "redux";
import reducer from "./reducer";

let store = createStore(reducer);

export default store;

5. reducer.js 설정

<-- reducer.js -->
let initialState = {
  count: 1,
};

function reducer(state = initialState, action) {
  console.log(action);
  switch (action.type) {
    case "EXAMPLE":
      return { count: state.count + 1 };
    default:
      return state;
  }
}

export default reducer;

6. 사용법 (useSelector)

import { useSelector } from "react-redux";

function App() {
<-- state가 reducer의 initial -->
const count = useSelector((state) => state.count);
}

7. 사용법 (useDispatch)

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

function App() {
<-- state가 reducer의 initial -->
const example = () => {
    dispatch({ type: "EXAMPLE" });
  };
}