TS-Redux

초기 환경 구축

npx create-react-app "tsredux" --template typescript

초기 패키지 설치

npm i redux @types/redux react-redux @types/react-redux

npm i redux-thunk @types/redux-thunk

npm i axios

리덕스 구축 순서

1. Reducer 만들기

// PokemonReducer.ts

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

export default PokemonReducer;

2. combineReducer 만들기

// index.ts

const rootReducer =  combineReducers({
    PokemonReducer
});

export default rootReducer;

3. store 만들기

// Store.ts

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

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

export default store;

4. 만든 store를 App에 연결해주기

// index.tsx

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

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