// src/redux/modules/todosSlice.js
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
const initialState = {
todos: [],
isLoading: false,
isError: false,
error: null,
};
// 우리가 추가한 Thunk 함수
export const __getTodos = createAsyncThunk(
"getTodos",
(payload, thunkAPI) => {}
);
export const todosSlice = createSlice({
name: "todos",
initialState,
reducers: {},
extraReducers: {},
});
export const {} = todosSlice.actions;
export default todosSlice.reducer;
export const __getTodos = createAsyncThunk('getTodos', async (payload, thunkAPI) => {
try {
const response =
await axios.get('http://localhost:4000/todos');
//Promise -> resolve (= 네트워크 요청이 성공한 경우) ->dispatch해주는 기능
return thunkAPI.fulfillWithValue(response.data);
} catch (error) {
return thunkAPI.rejectWithValue(error);
}
});
fulfillWithValue는 툴킷에서 제공하는 API 이다.
Promise에서 resolve된 경우, 다시 말해 네트워크 요청이 성공한 경우에 dispatch 해주는 기능을 가진 API 이다. 그리고 인자로는 payload를 넣어줄 수 있다.
rejectWithValue 도 툴킷에서 제공하는 API 이다.
Promise가 reject 된 경우, 네트워크 요청이 실패한 경우 dispatch 해주는 기능을 가진 API다. 마찬가지로 인자로 어떤 값을 넣을 수 있습니다. catch 에서 잡아주는 error 객체를 넣었다.
type
과 payload
가 있다export const todoSlice = createSlice({
name: 'todos',
initialState,
reducers: {},
extraReducers: {
[__getTodos.pending]: (state, action) => {
state.isLoading = true;
state.isError = false;
},
[__getTodos.fulfilled]: (state, action) => {
state.isLoading = false;
state.isError = false;
state.todos = action.payload;
},
[__getTodos.rejected]: (state, action) => {
state.isLoading = false;
state.isError = true;
state.error = action.payload;
},
},
});
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import './App.css';
import { __getTodos } from './modules/todoSllice';
function App() {
const dispatch = useDispatch();
const { isLoading, error, todos } = useSelector((state) => {
return state.todos;
});
useEffect(() => {
dispatch(__getTodos());
}, []);
if (isLoading) {
return <div>로딩중...</div>;
}
if (error) {
return <div>{error.message} </div>;
}
return (
<div>
{todos.map((todo) => {
return <div key={todo.id}>{todo.title}</div>;
})}
</div>
);
}
export default App;