在 redux 操作后获取更新状态

Question

我正在尝试使用 redux 操作在更改后使用当前状态更新数据库。

例如。 removeStock 被调用并将库存状态从 ["A", "B", "C"] 更改为 ["A", "C"]

此后我立即调用 updateWatchlist 将新状态发送到数据库。问题是 mapStateToProps 没有更新，并且正在将原始数据发送到服务器，尽管页面上显示了正确的数据。

动作

///update
export const updateWatchlist = (payload, selected) => async (dispatch: Function, getState) => {
    const response = await axios
        .put(`${API_URL}/api/editWatchlist/${selected}`, {body: payload}, tokenConfig(getState))
}

///Delete
export const removeStock = (payload) => ({
    type: DELETE_STOCK,
    payload,
});

组件

const Security = ({index, name, stocks, selected}) => {
    const dispatch = useDispatch();
    const [taskName, setTaskName] =useState(name)

    const removeTask = (e) => {
        e.stopPropagation()
        dispatch(removeStock(index))
        dispatch(updateWatchlist(stocks, selected))
    }    

    return (
        <Row className="list-group-item">
            <div className="item-titles">
                {name}
            </div>
            <button onClick={(e) => removeTask(e)} className="remove-item">
                <i className="glyphicon glyphicon-remove"></i>
            </button>
        </Row>
    );

}

const mapStateToProps = (state) => {
    return {
        stocks: state.Watchlist.stock.watchlist,
    }
}

Answer 1

因为您的 removeTask 调用堆栈保留了 stocks 变量的原始值，并且 updateWatchlist 的 2 个参数仍然引用该值。在 redux 中的状态更改后，您的组件将被重新渲染并更改 sto

    const removeTask = (e) => {
        //// stocks not changed after dispatch(removeStock(index))
        /// it just changed when component rerender 
        e.stopPropagation()
        dispatch(removeStock(index))
        dispatch(updateWatchlist(stocks, selected))
    }

我建议你可以使用 useEffect 来观察股票何时变化然后更新你的观察列表：

useEffect(()=>{
   dispatch(updateWatchlist(stocks, selected))
},[stocks])

在 redux 操作后获取更新状态

Get updated state after redux action

javascript

reactjs

redux

redux-thunk