如何让Redux状态在useEffect调用时立即更新？

核心问题 #

1. 未执行异步请求函数：你在useEffect里定义了fetchData但没调用，导致Redux的action根本没触发，状态自然不会更新。
2. useDispatch使用错误：useDispatch是React Hook，不能用new实例化，正确写法是const dispatch = useDispatch()。
3. 本地state未同步Redux状态：你用本地staterowData初始化自props，但Redux状态更新后，组件不会自动同步这个本地state——要么直接用props里的Redux状态，要么监听props变化更新本地state。
4. connect与Hook混用冗余：既然用了connect，可以直接把action映射到props，或者只用Hook写法，没必要混用。

修正后的代码实现 #

方案1：直接使用Redux状态（推荐，无需本地state）

去掉本地rowData状态，直接用props.inventory.inventory传给表格，Redux状态更新后组件会自动重新渲染：

function InventoryData(props){
    const dispatch = useDispatch(); // 修正useDispatch写法
    const gridRef = useRef();

    useEffect(() => {
        // 调用fetchData执行异步请求
        const fetchData = async () => {
          await dispatch(getInventory());
        };
        fetchData();
    }, [dispatch]); // 依赖dispatch，避免重复创建函数
    
    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={props.inventory.inventory} // 直接用Redux状态
                    columnDefs={columnDefs}
                    pagination={true}
                />
            </div>
            <button onClick={()=>{console.log(props.inventory)}}>查看Redux状态</button>
        </div>
    );
}

const mapStateToProps = (state) => ({
    inventory: state.inventory
});

// 把getInventory映射到props，和useDispatch二选一即可
export default connect(mapStateToProps, { getInventory })(InventoryData);

方案2：保留本地state并同步Redux状态

如果一定要用本地state，需要添加监听props变化的useEffect：

function InventoryData(props){
    const dispatch = useDispatch();
    const gridRef = useRef();
    const [rowData,setRowData] = useState(props.inventory.inventory);

    // 监听Redux状态变化，同步到本地state
    useEffect(() => {
        setRowData(props.inventory.inventory);
    }, [props.inventory.inventory]);

    useEffect(() => {
        const fetchData = async () => {
          await dispatch(getInventory());
        };
        fetchData();
    }, [dispatch]);
    
    // 其余代码同方案1...
}

额外优化建议 #

1. Redux异步action规范写法：如果你用的是Redux Toolkit，推荐用createAsyncThunk来写异步action，比手动写thunk更规范：

import { createAsyncThunk } from '@reduxjs/toolkit';

export const getInventory = createAsyncThunk(
  'inventory/getInventory',
  async () => {
    const res = await axios.get("/inventory/get");
    return res.data.data; // 直接返回数据，reducer里用action.payload接收
  }
);

// 在slice里处理异步action的不同状态
export const inventorySlice = createSlice({
  name: "inventory",
  initialState: {
    inventory: [],
    status: 'idle', // 标识请求状态：空闲/加载中/成功/失败
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getInventory.fulfilled, (state, action) => {
        state.inventory = action.payload;
        state.status = 'succeeded';
      })
      .addCase(getInventory.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(getInventory.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  }
});

这样可以更清晰地处理异步请求的不同状态，方便在组件里展示loading提示或错误信息。

2. 简化组件写法：如果用useDispatch和useSelector，可以不用connect，代码更简洁：

import { useDispatch, useSelector } from 'react-redux';

function InventoryData(){
    const dispatch = useDispatch();
    const inventory = useSelector(state => state.inventory.inventory);
    // 其余代码同方案1...
}

export default InventoryData; // 无需connect

内容的提问来源于stack exchange，提问作者kevin