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

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

import { useSelector, useDispatch } from "react-redux";
import { fetchUser } from "./redux/userSlice";
import React, { useEffect } from "react";
import { RootState } from "./redux/store";
import { Dispatch } from "redux";
import { useAppDispatch, useAppSelector } from "./hooks/useTypedSelector";

export default function App(): JSX.Element {
  const dispatch = useAppDispatch();
  // RootState가 useSelector에서 state의 타입으로 사용된 것
  const { users, loading, error } = useAppSelector(state => state.users);

  return (
    <div className="App" style={{ margin: "0 auto", textAlign: "center" }}>
      <h1>Redux-tookit with Thunk</h1>
      <button onClick={() => dispatch(fetchUser())} style={{ display: "inline-block", padding: "10px 15px", borderRadius: "5px" }}>정보 가져오기</button>
      {users?.length > 0 &&
        users.map((user) =>
          <div key={user.index} style={{ textAlign: "center", margin: "0 auto" }}>
            <img src={user.src} alt={user.alt} style={{ display: "block", maxWidth: "300px", margin: "25px auto", borderRadius: "15px" }} />
            {user.name}
          </div>
        )}
    </div>
  )
}

import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
import axios from "axios";
import { store } from "./store";
import { CommonType } from "../Type/TypeBox";

interface initialType {
    users: CommonType[],
    loading: boolean,
    error: string | undefined
}

const initialState: initialType = {
    users: [],
    loading: false,
    error: ""
}

export const fetchUser = createAsyncThunk(
    'counterSlice/asyncUpFetch',
    async () => {
        return axios({
            method: "get",
            url: "https://raw.githubusercontent.com/light9639/Shoe-Store/main/data/Shoes.json"
        }).then(response => response.data.Kids);
    }
)

// slice 생성
const usersSlice = createSlice({
    // slice 이름 정의
    name: "users",
    // 초기 값
    initialState,
    // 리듀서
    reducers: {},
    extraReducers: (builder) => {
        builder.addCase(fetchUser.pending, (state) => {
            state.loading = true;
        }),
            builder.addCase(fetchUser.fulfilled, (state, action) => {
                state.users = action.payload;
                state.loading = false;
            }),
            builder.addCase(fetchUser.rejected, (state, action: PayloadAction<any>) => {
                state.loading = false;
            })
    }
});

// useSelector 사용시 타입으로 사용하기 위함
export type RootState = ReturnType<typeof store.getState>
// useDispatch를 좀 더 명확하게 사용하기 위함
export type AppDispatch = typeof store.dispatch

// slice를 내보냄
export default usersSlice.reducer;

import { configureStore } from "@reduxjs/toolkit";
import { useDispatch } from 'react-redux';
import userReducer from "./userSlice";

export const store = configureStore({
    reducer: {
        users: userReducer
    }
});

import { useDispatch, useSelector } from "react-redux";
import type { TypedUseSelectorHook } from "react-redux";
import type { RootState, AppDispatch } from "../redux/store";

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

export type CommonType = {
    index: number;
    src: string;
    alt: string;
    name: string;
    info: string;
    price: string;
    Gender: string;
    href: string;
    star: {
        first: string;
        second: string;
        third: string;
        four: string;
        five: string;
    };
    Review: number;
    count: number;
}