Компонент получает асинхронное избыточное состояние? - PullRequest
Новая
       6

Компонент получает асинхронное избыточное состояние?

0 голосов
/ 16 октября 2018

У меня проблема с избыточным состоянием.Компонент нумерации страниц имеет метод 

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

props.removeFilterParam и props.addFilterParam - действия с избыточностью, которые изменяют хранилище с избыточностью, 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);
    }
}

Родительский компонент связан с избыточным хранилищем.Когда в консоли вызывается getProducts, я вижу это:

enter image description here

Таким образом, после изменения состояния избыточности с помощью addFilterParam изменения не применяются в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; 
    }
}

1 Ответ

0 голосов
/ 16 октября 2018

Действия Redux не являются синхронными.Они не меняют реквизиты ваших компонентов на лету.Они запускают действие, которое может изменить редуктор (и точно так же, как реагирует setState, , это не синхронно ).Они обязательно будут изменены при следующем render() звонке.Если вам необходимо получить уведомление об изменении реквизита, вы можете использовать componentDidUpdate() обратный вызов.В вашем примере: 

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