Redux 기본 세팅

(1) redux 설치

npm install redux react-redux

(2) redux-thunk 설치

npm install redux-thunk

(3) index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./redux/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

reportWebVitals();

(3) redux/store.js 스토어 생성

//store 생성 함수
import { createStore } from "redux";
import reducer from "./reducer/reducer";
//store는 reducer를 매개변수로 가져온다.
let store = createStore(reducer);
export default store;

(4) redux/reducer/reducer.js

reducer는 여러 개를 만들 수 있다.

//관리 해줄 state(객체)
let initialState = {};

//reducer는 항상 state와 action 파라미터 2개를 가져간다.
//state는 초기값으로 initialState를 넣어준다.
function reducer(state = initialState, action) {}

export default reducer;

(5) redux/store.js redux-thunk 추가

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers/index'

const store = createStore(rootReducer, applyMiddleware(thunk))