February 9, 2022 https://youtu.be/qSRPwBrDeXU

1️⃣ redux로 감싸기

src/reducers/PokemonReducer.ts

interface initialState {}

const initialState: initialState = {};

const PokemonReducer = (state = initialState, action: any) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default PokemonReducer;

yarn add redux @types/redux react-redux @types/react-redux

yarn add axios

yarn add redux-thunk @types/redux-thunk

src/reducers/index.ts

import { combineReducers } from "redux";
import PokemonReducer from "./PokemonReducer";

const rootReducer = combineReducers({
  // 만들어둔 리듀서 불러오기
  PokemonReducer,
});

export default rootReducer;

src/store.ts

import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

// applyMiddleware: 비동기로 리덕스 상태관리를 해주는데 필요함
const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

src/index.tsx

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

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

2️⃣ Action & Types