如何使用Redux Toolkit对我的负载进行POST请求

Question

在我的项目中，我从用户输入中获取值，然后将这些值发送到redux并保存在数组中。

然而，在Redux reducer中实现了逻辑之后，我还试图使用PUT请求将这些输入日志发送/同步到数据库。

我知道在redux reducer内发送fetch/POST请求不是最佳做法，那么在reducer中更新新负载后，我可以将其发送到哪里？

这是我的组件，用户可以在其中输入数据：

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { logActions } from '../../store';
import classes from './AddLogModal.module.css';
const AddLogModal = () => {
const [message, setMessage] = useState('');
const [attention, setAttention] = useState(false);
const [tech, setTech] = useState('');
const techs = useSelector(state => state.tech.techs);
const date = new Date().toISOString().split('T')[0];
const dispatch = useDispatch();
const submitHandler = () => {
let data = {
message: message,
attention: attention, 
tech: tech,
date: date,
}
dispatch(logActions.addLog(data));
setMessage('');
setAttention('');
setTech('');
}
return (
<div id='add-log-modal' className='modal'>
<div className="modal-content">
<h4>Enter System Log</h4>
<div className="row">
<div className="input-field">
<input onChange={(e)=> setMessage(e.target.value)} type="text" name="message" value={message}/>
<label className="active" htmlFor="message">Log Message</label>
</div>
</div>
<div className="row">
<div className="input-field">
<select className="browser-default" onChange={(e)=> setTech(e.target.value)} name="tech" value={tech}>
<option value="" disabled>Select a Technician</option>   
{techs.map(tech => (
<option value={tech.firstName} key={tech.id}>{tech.firstName} {tech.lastName}</option>
))}
</select>
</div>
</div>
<div className="row">
<div className="input-field">
<p>
<label>
<input 
type="checkbox" 
className="" 
checked={attention} 
value={attention}
onChange={()=> setAttention(attention => !attention)}
/>
<span>Needs Attention</span>
</label>
</p>
</div>
</div>
</div>
<div className="modal-footer">
<a href="#" className="modal-close waves-effect waves-green blue btn" onClick={submitHandler}>Enter</a>
</div>
</div>
)
}
export default AddLogModal;

这是我的redux存储，数据被推送到带有logSlice 的数组中

import { createSlice, configureStore } from '@reduxjs/toolkit';
const initialLogState = {logs:[]};
const logSlice = createSlice({
name:'log',
initialState: initialLogState,
reducers: {
addLog(state, action){
state.logs.push(action.payload);
// console.log('log added');
// console.log(JSON.stringify(state, undefined, 2));
},
removeLog(state, action){
state.logs = state.logs.filter(log => log.id !== action.payload);
},
replaceLogs(state, action){
state.logs = action.payload;
}, 
}
});
const initialTechState = {techs: []};
const techSlice = (createSlice({
name: 'tech', 
initialState: initialTechState,
reducers: {
addTech(state, action){
state.techs.push(action.payload);
}, 
removeTech(state, action){
state.techs = state.techs.filter(tech => tech.id !== action.payload);
},
replaceTechs(state, action){
state.techs = action.payload;
}
}
}));
const store = configureStore({
reducer: {
log: logSlice.reducer,
tech: techSlice.reducer
}
});
export const logActions = logSlice.actions;
export const techActions = techSlice.actions;
export default store;

Answer 1

因此，要使用API与数据库通信，可以使用createAsyncThunk。成功更新数据库后，redux存储应该更新，但您现在的想法正好相反。https://redux-toolkit.js.org/api/createAsyncThunk