redux-thunk还是中间件？

Question

I've multiple action after which I have to call other 2 action .

My first approach would be to write a middleware that looks like this:

some-middleware.js

const actions = {
  [POST_CATEGORIES_SUCCESS]: 1,
  [SET_READING_TIME_SUCCESS]: 1
}

export default store => next => action => {

  // console.log("calling auth middleware", action)

  // Reset any session data before SIGNUP or LOGIN request
  if (actions[action.type] === 1) {
    store.dispatch(resetStories())
    store.dispatch(getStories())
  }


  return next(action)

}

Another approach would be to put

    store.dispatch(resetStories())
    store.dispatch(getStories())

inside two redux-thunk like

export const postCategories = (categories) => (dispatch) => {
  dispatch(fetchPostCategories(categories))
  store.dispatch(resetStories())
  store.dispatch(getStories())
}

export const setReadingTime = (readingTime) => (dispatch) => {
  dispatch(fetchReadingTime(readingTime))
  store.dispatch(resetStories())
  store.dispatch(getStories())
}

This means repeated code per every time I need those two actions to be dispatched.

Am I missing something about all this? Is middleware approach correct?

Answer 1

You can setup a base dispatch function with redux-thunk. Still a little extra code, and if you have multiple action files you'll need to import the function into all of them, but I think the app will be more robust since you might encounter a situation when you don't want to dispatch those actions.

export const baseDispatch = (action) => (dispatch) => {
  dispatch(action)
  dispatch(resetStories())
  dispatch(getStories())
}

export const postCategories = (categories) => (dispatch) => {
  dispatch(baseDispatch(fetchPostCategories(categories)));
}