//express를 통해 간단한 서버를 만들어 통신하였다
app.post('/api/users/:id/update', (req, res) => {
setTimeout(() => {
res.send(req.body);
}, 2000);
});
//예시 코드
//userSlice.js
import axios from 'axios';
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
export const updateUser2 = createAsyncThunk('user/update', async (user) => {
const res = await axios.post(
'http://localhost:8800/api/users/1/update',
user
);
return res.data;
});
const userSlice = createSlice({
name: 'user',
initialState: {
userInfo: {
name: 'Peter',
email: 'Peter@gmail.com',
},
pending: null,
error: null,
},
extraReducers: {
[updateUser2.pending]: (state) => {
state.pending = true;
state.error = false;
},
[updateUser2.fulfilled]: (state, action) => {
state.pending = false;
state.userInfo = action.payload;
},
[updateUser2.rejected]: (state) => {
state.pending = null;
state.error = true;
},
},
});
export default userSlice.reducer;
//사용할때
import { useDispatch } from 'react-redux';
import { updateUser2 } from '../../redux/userSlice';
const dispatch = useDispatch();
dispatch(updateUser2({ name, email }));