기본 코드

📁 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './redux/config/configStore';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();

📁 App.jsx

import React from 'react'

const App = () => {
  return (
    <div>Thunk App</div>
  )
}

export default App

📁 redux / config / configstore.js

import todos from "../modules/todosSlice";
import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: {
    todos,
  },
});

export default store;

📁 redux / modules / todosSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  todos: [],
}

export const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {}
})

export const {} = todosSlice.actions;
export default todosSlice.reducer;

📁 db.json

{
  "todos": []
}

---

순서

1. trunk함수 구현
2. 리듀서 로직 구현 : reducers -> extraReducers

• tjqj xhdtls : 100% 성공(x)
• 지금까지의 redux state(todos, counter)
• 앞으로의 state(isLoading, isError, data)

3. 기능 확인(network) + devTools
4. Store의 값을 조회 + 화면에 렌더링