如何为useeffect调用立即更新redux状态

Question

在使用redux方面有点迷失。我想做的是关于useeffect，调用get API操作，然后调用reducer来设置redux状态。然而，当初始值仍然为null时，正在调用redux状态的值。有办法解决这个问题吗？

我尝试的解决方案是使用本地状态，它与以下代码完美配合

useEffect(() => {
const fetchData = async () => {
const res = await axios.get("/inventory/get")      
setRowData(res.data.data)
}
fetchData()
}, []); 

现在这个axios.get实际上是我redux操作的副本。

当我尝试调度get操作时，状态不会立即随之更新。以下是我尝试使用调度时的代码

useEffect(() => {
const fetchData = async () => {
const res =  dispatch(getInventory())
console.log(res)
}
setRowData(props.inventory.inventory)

// setRowData(props.inventory)
}, []); 

用redux有合适的方法吗？我在网上搜索了一下，但没有结果，我不知道我是否遗漏了什么，或者这是一个重复的问题，任何推荐信或建议都会有所帮助。

这是页面的全部代码，并重复

页面

function InventoryData(props){
const dispatch = new useDispatch()
const gridRef = useRef();
const [rowData,setRowData] = useState(props.inventory.inventory);
useEffect(() => {
const fetchData = async () => {
const res =  dispatch(getInventory())
console.log(res)
}
setRowData(props.inventory.inventory)

// setRowData(props.inventory)
}, []);  

const [columnDefs] = useState([
{ field: 'id', width: 100},
{ field: 'product_category' },
{ field: 'product_cost'},
{ field: 'product_desc'},
{ field: 'product_name'},
{ field: 'product_price'},
])
const onFirstDataRendered = useCallback((params) => {
gridRef.current.api.sizeColumnsToFit();
}, []);
return(
<div>
<div className="ag-theme-alpine" style={{height: 650, width: '100%'}}>
<AgGridReact
ref={gridRef}
onFirstDataRendered={onFirstDataRendered}
rowData={rowData}
columnDefs={columnDefs}
pagination={true}
>
</AgGridReact>
</div>
<button onClick={(e)=>{console.log(props.data)}}>asf</button>
</div>
)
}
const mapStateToProps = (state) => ({
inventory: state.inventory
})
export default connect(mapStateToProps, null)(InventoryData)

冗余

export const inventorySlice = createSlice({
name: "inventory",
initialState: {
inventory: [

],
},
reducers: {
setInventory: (state,action)=>{
state.inventory = action.payload.data
}
},
});
export const { setInventory,
} = inventorySlice.actions;
export default inventorySlice.reducer;
export const getInventory = ()=>{
return async dispatch =>{
try{
const res = await axios.get("/inventory/get")
// console.log(res.data.data)
await dispatch(setInventory(res.data))
return res.data
}catch(err){

}
}
}

Answer 1

天哪，所以显然我错过了useEffect的一个重要细节，即在重新发布时观察状态变化。因此，我想出了这个办法，并且成功了。但问题仍然存在，这是正确的方式吗？

useEffect(() => {
const fetchData = async () => {

}
dispatch(getInventory())     
setRowData(props.inventory.inventory)
// setRowData(props.inventory)
}, [props.inventory.inventory]);