在 redux 操作后获取更新状态答案

【问题标题】：Get updated state after redux action在 redux 操作后获取更新状态
【发布时间】：2021-01-05 04:22:47
【问题描述】：

我正在尝试使用 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,
    }
}

【问题讨论】：

标签： javascript reactjs redux redux-thunk

【解决方案1】：

因为您的 removeTask 调用堆栈保存股票变量的原始值，并且 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])

【讨论】：