Pass values as parameters state from the component or access the status in the action creator?

Question

In my project I have action creator that depend on values ​​that are in the state of the application to generate a new value or to decide what action to dispatch. My question is to know which is the right way to do it. I thought of two ways. Access those values ​​within the action creator:

export const changePreviousPage = () => {
    return (dispatch, getState) => {
        let pagination = getState().appReducers.availability.pagination;

        let previousPage = pagination.actualPage != 1 ? pagination.actualPage - 1 : pagination.actualPage;
        dispatch({
            type: types.CHANGE_PREVIOUS_PAGE,
            previousPage
        });  
    }
};

The other option I thought was to pass the value from the component to the action creator:

In my component

class Pagination extends Component {
    ... 
    handlePreviousPage() {
        const {pagination} = this.props;
        this.props.changePreviousPage(pagination);
    }
    ...
} 

In my action creator

export const changePreviousPage = pagination => {
    let previousPage = pagination.actualPage != 1 ? pagination.actualPage - 1 : pagination.actualPage;

    return{
        type: types.CHANGE_PREVIOUS_PAGE,
        previousPage
    }
};

What is the best way to address it ?

Answer 1

In my opinion always use/retrieve the state at the closest time to execution, here the action creator (or rather more specifically the thunk you are returning that would then execute).

Remember that dispatch may have any number of middleware running before the actual store.dispatch call. This can include async middleware, so the state may have changed in between calling the dispatch and the store.dispatch call it will ultimately run.

Another one to consider is you may be dispatching multiple things in an action creator which change the state and invalidate what you passed into the action creator at the top. Also a reason why I consider let state = getState() at the top of an action creator a bad idea unless you are very sure nothing is going to change during your processing (as soon as you involve any API calls I would always use getState() again instead of using a stored variable).

Also putting data from state into props (using a redux container and connect helper method) will cause a rerender every time this changes, which could have a performance impact in some cases.

My personal coding preference is also to keep things as simple as possible in mapDispatchToProps (assuming that is where you're passing in your handlers like handlePreviousPage) and avoid any data processing (in your example it's not much, but you can easily see how that may get out of hand if you're preparing data for your action creator).