🎁 Redux + React + TypeScript

📃 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(
1️⃣ <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

📋 Memo(index.tsx)

    1️⃣ <React.StrictMode>
      1. 안전하지 않은 생명주기를 사용하는 컴포넌트를 찾는다.
      2. 레거시 문자열 ref 사용에 대한 경고한다.
      3. 권장되지 않는 findDOMNode 사용에 대한 경고한다.
      4. 예상치 못한 부작용을 검사한다.
      5. 레거시 context API를 검사한다.

📃 store.ts

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

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

export type RootReducerType = 2️⃣ ReturnType<typeof rootReducer>

export default store;

📋 Memo(store.ts)

    1️⃣ import thunk from 'redux-thunk'
      1.비동기로 redux state들을 관리 할 때 필요한 middleware이다.
      
    2️⃣ ReturnType<typeof rootReducer>
      1. ReturnType 타입은 주어진 generic type의 return type을 할당한다.

📁 reducers

📃 index.ts

1️⃣ import {combineReducers} from 'redux';
import PokemonReducer from './PokemonReducer';

const rootReducer = combineReducers({
    PokemonReducer
})

export default rootReducer;

📋 Memo(index.ts)

    1️⃣ import {combineReducers} from 'redux';
      1.여러개의 reducer가 존재 할 때 하나로 합쳐서 할당시키는 역할을 한다.

📃 PokemonReducer.ts

import {POKEMON_FAIL, POKEMON_SUCCESS,PokemonType,PokemonDispatchType} from '../actions/PokemonActionType'

interface InitialState {
    success:boolean
    pokemon?:PokemonType
}

const initialState : InitialState = {
    success:false
}

const PokemonReducer = (state=initialState, action:PokemonDispatchType) : InitialState=> {
    switch (action.type) {
        case POKEMON_FAIL :
            return{
                ...state,
                success:false
            }
        case POKEMON_SUCCESS :
          1️⃣ const {abilities,sprites} = action.payload
            return {
                ...state,
                success:true,
                pokemon: {
                    abilities,
                    sprites
                }
            }
        default:
            return{
                ...state
            }
    }
}

export default PokemonReducer

📋 Memo(PokemonReducer.ts)

    1️⃣ const {abilities,sprites} = action.payload
      1.abilities = action.payload.abiliteis
      2.sprites = action.payload.sprites

📁 actions

📃 PokemonActionType.ts

1️⃣ export const POKEMON_SUCCESS = 'POKEMON_SUCCESS'
   export const POKEMON_FAIL = 'POKEMON_FAIL'

2️⃣ export type PokemonType = {
    abilities : PokemonAbility[]
    sprites : PokemonSprites
}

3️⃣ export type PokemonAbility = {
    ability: {
        name:string,
        url:string,
    },
    is_hidden:boolean,
    slot:number
}
export type PokemonSprites = {
    front_default : string
}

4️⃣ export interface pokemonFailDispatch {
    type : typeof POKEMON_FAIL
}
export interface pokemonSuccessDispatch {
    type : typeof POKEMON_SUCCESS
    payload: {
        abilities : PokemonAbility[],
        sprites : PokemonSprites
    }
}

5️⃣ export type PokemonDispatchType = pokemonFailDispatch | pokemonSuccessDispatch

📋 Memo(PokemonActionType.ts)

    1️⃣ export const POKEMON_SUCCESS = 'POKEMON_SUCCESS'...
      1. action의 type을 변수로 선언한다.
      
    2️⃣ export type PokemonType
      1. fetch한 data에서 사용할 data인 abilities와 sprites의 type을 선언한다.
    
    3️⃣ export type PokemonAbility,export type PokemonSprites
      1. ability, is_hidden, slot, front_default의 type을 선언한다.
    
    4️⃣ export interface pokemonFailDispatch, export interface pokemonSuccessDispatch
      1. fetch를 실패 했을 때, 성공 했을 때의 action의 type을 정의한다.
      
    5️⃣ export type PokemonDispatchType
      1. PokemonAction.ts 파일 안의 dispatch 함수의 type을 정의한다.

📃 PokemonAction.ts

import axios from 'axios'
import {Dispatch} from 'redux';
import {PokemonDispatchType, POKEMON_SUCCESS, POKEMON_FAIL} from './PokemonActionType';

export const fetchPokemonData = (pokemonName:string) => async (dispatch:Dispatch<PokemonDispatchType>) => {

    try {
        const res = await axios.get(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`)
        const data = res.data

        1️⃣ dispatch({
            type:POKEMON_SUCCESS,
            payload:data
        })

    } catch(err) {
        2️⃣ dispatch({
            type:POKEMON_FAIL
        })
    }
}

📋 Memo(PokemonAction.ts)

    1️⃣ dispatch => Success
      1. axios.get()을 성공하였을 경우 data와 함께 action 생성함수 없이,
         type이 POKEMON_SUCCESS인 action object를 dispatch한다.
    2️⃣ dispatch => fail
      1. axios.get()을 실패하였을 경우 type이 POKEMON_FAIL인 action object를 dispatch한다.

📃 App.tsx

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {useState} from 'react';
import {RootReducerType} from './store'
import {fetchPokemonData} from './actions/PokemonAction'

function App() {

const [pokemonName, setPokemonName] = useState("");
1️⃣ const pokemonReducer = useSelector((state : RootReducerType) => state.PokemonReducer)

2️⃣ const dispatch = useDispatch();

const handlePokemonName = (event : React.ChangeEvent) => setPokemonName(event.target.value);

const searchButtonTapped = () => {
dispatch(fetchPokemonData(pokemonName))
}

return (

<div className="App">
  <input value = {pokemonName} onChange={handlePokemonName}/>
    <button onClick={searchButtonTapped}>포켓몬찾기</button>
      <div>
        {pokemonReducer.success && <div>
          <p>{pokemonName}</p>
          {pokemonReducer.pokemon?.abilities.map((ability, id) => {
            return <div key={id}><p>{ability.ability.name}</p>
            <p>{ability.slot}</p></div>
          })}
          <img src={pokemonReducer.pokemon?.sprites.front_default} />
          </div> }
      </div>
</div>

);
}

export default App;

#### 📋 Memo(App.tsx)
```typescript
    1️⃣ const pokemonReducer = useSelector((state : RootReducerType) => state.PokemonReducer)
      1. PokemonReducer가 관리하는 state를 useSelector hook으로 조회한다.
    2️⃣ const dispatch = useDispatch();
      1. fetchPokemonData의 return 값인 action을 dispatch하기 위해서
         useDispatch hook을 사용한다.