CODEWITHSUNDEEP
reactjsreduxreact-redux
Григорий Дикий
Григорий Дикий

Reputation: 221

Component getting redux state asynchronously?

I have a problem with redux state. Pagination component has the method

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

props.removeFilterParam and props.addFilterParam are redux actions that modify redux store, getProducts is method on parent component that looks like this

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);
    }
}

Parent component is connected with redux store. When getProducts is called in console I see this:

enter image description here

So after modifying the redux state by addFilterParam, the changes is not applied in getProducts function synchronously.

Actions are:

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

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

Reducer is:

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; 
    }
}

Upvotes: 2

Views: 62

Answers (1)

astorga
astorga

Reputation: 1601

Redux actions are not synchronous. They don't change your component props on-the-fly. What they do is trigger an action that can change a reducer (and just like react setState, it's not synchronous). They will sure be changed on next render() call. If you need to be notified when a prop is changed, you can use componentDidUpdate() callback. In your example:

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

Upvotes: 1

Related Questions