Redux-thunk actions

Question

I have actions/index.js file with action creators, and I am using redux-thunk as middleware. This is the code:

export const fetchUser = () => async dispatch => {
    const res = await axios.get('/api/current_user');
    dispatch({type: FETCH_USER, payload: res.data});
};

export const handleToken = (token) => async dispatch => {
    const res = await axios.post('/api/stripe/', token);

    dispatch({type: FETCH_USER, payload: res.data});
};

export const submitSurvey = (values, history) => async dispatch => {
    const res = await axios.post('/api/Surveys', values);

    history.push('/Surveys');
    dispatch({type: FETCH_USER, payload: res.data});
};

export const scrollMovement = (scrollValue) => dispatch => {
    dispatch({type: SCROLL_MOVE, payload: scrollValue})
};

export const selectConfig = (id) => dispatch => {
  dispatch({type: "SELECT_CONFIG", payload: id})
};

And I have a question. Should I write action creators, which do not send a request to external API (for example, scrollMovement and selectConfig), at the same style, as I write hadleToken, submitSurvey, and fetchUser action creators?

I hope that you understand my question. If not, add comments, I will explain.

Steven Daniel Anderson Steven Daniel Anderson · Accepted Answer · 2017-10-09T17:25:52

For an a synchronous flow of data, you just need to return an object as normal you do, because, under the hood, thunk middleware intercepts actions of the type function before the dispatch is generated.

So for scrollMovement and selectConfig you don't have to return a function because these follow an a synchronous flow of data

export const scrollMovement = scrollValue => {
    return {type: SCROLL_MOVE, payload: scrollValue}
};

export const selectConfig = id => {
  return {type: "SELECT_CONFIG", payload: id}
};

Redux-thunk actions

1 Answers