组件异步获取redux状态？答案

【问题标题】：Component getting redux state asynchronously?组件异步获取redux状态？
【发布时间】：2019-03-20 23:52:27
【问题描述】：

我对 redux 状态有疑问。分页组件有方法

const setPage = page => {
    props.removeFilterParam('page');
    props.addFilterParam('page', page);
    props.getProducts();
}

props.removeFilterParam 和 props.addFilterParam 是修改 redux 存储的 redux 操作，getProducts 是父组件上的方法，如下所示

async getProducts() {
    try {
        console.log('Filter before', this.props.filter);
        setTimeout(() => console.log('After', this.props.filter), 2000)
        // const slug = this.props.match.params.slug;
        // const queryString = transformToQueryString(this.props.filter);
        // await this.props.getProductsRequest(`/api/categories/${slug}/${queryString}`);
    } catch (error) {
        console.error(error);
    }
}

父组件与 redux store 连接。当getProducts 在控制台中被调用时，我看到了这个：

所以addFilterParam修改redux状态后，更改不会同步应用到getProducts函数中。

动作是：

export const addFilterParam = (name, value) => ({
    type: ADD_FILTER_PARAM,
    name,
    value
})

export const removeFilterParam = (name, value) => ({
    type: REMOVE_FILTER_PARAM,
    name,
    value
});

减速机是：

const filterReducer = (state = {}, action) => {
    switch(action.type) {
        case ADD_FILTER_PARAM:
            if (state.hasOwnProperty(action.name)) {
                if (Array.isArray(action.value)) {
                    state[action.name] = [...state[action.name], ...action.value];
                } else {
                    if (state[action.name].indexOf(action.value) === -1) {
                        state[action.name].push(action.value);
                    }
                }
            } else {
                if (Array.isArray(action.value)) {
                    state[action.name] = action.value;
                } else {
                    state[action.name] = [action.value];
                }
            }
            return {...state};

        case REMOVE_FILTER_PARAM:
            if (state.hasOwnProperty(action.name)) {
                if (action.value) {
                    let args = state[action.name];
                    const index = args.indexOf(action.value);

                    if (index !== -1) {
                        args.splice(index, 1);

                        if (args.length) {
                            state[action.name] = args;
                        } else {
                            delete state[action.name];
                        }
                    }
                } else {
                    delete state[action.name];
                }
            }

            return {...state};

        case CLEAR_FILTER:
            return {};

        default: return state; 
    }
}

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

Redux 操作不是同步的。他们不会即时更改您的组件道具。他们所做的是触发一个可以改变reducer的动作（就像反应setState，it's not synchronous）。他们肯定会在下一次render() 电话中更改。如果需要在某个 prop 发生更改时得到通知，可以使用 componentDidUpdate() 回调。在您的示例中：

componentDidUpdate(prevProps) {
  const { filter } = this.props
  if (filter !== prevProps.filter) {
    // filter changed
    console.log('Filter changed', filter)
  }
}

【讨论】：