redux-thunk pass dispatch to another function?

Question

I have current scenario where I want to use function composition:

const funcTwo = (status, response) =>
  (dispatch) => {
    if (response.error) {
      dispatch({ type: TOKEN_FAILURE });
      dispatch(notificationShow('ERROR', response.error.message));
    } else {
      dispatch({ type: TOKEN_SUCCESS, payload: response.id });
    }
  };

export const funcOne = target =>
  (dispatch) => {
    dispatch({ type: TOKEN_REQUEST });
    Helper.createToken(target, funcTwo);
  };

I am currently facing an issue of dispatch not working in funcTwo due to it not being used in any sort of connect() but I wanted to know if it is possible to pass dispatch to it somehow?

CharlieBrown · Accepted Answer · 2017-02-03 18:58:19Z

1

Create two functions that are thunks themselves, and move the response handling logic to the first one. Your helper function should return a Promise so you can chain your success / error handlers.

The idea is one thunk can dispatch multiple actions, and any or all of them could be another thunk themselves.

Pseudocode:

export function requestToken(target){
  return (dispatch) => {
     dispatch({ type: TOKEN_REQUEST })
     Helper.createToken(target)
     .then(
        response => {
          dispatch({ 
            type: TOKEN_REQUEST_SUCCESS, 
            payload: response.id
          })
        },
        //your createToken failure handler
        error => {
          dispatch(yourErrorActionCreator(err))
        }
     )
  }

answered Feb 3, 2017 at 18:58

CharlieBrown

4,17325 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashish · Accepted Answer · 2017-02-03 10:18:07Z

0

Yes! it is.

const funcTwo = (status, response, dispatch) =>
() => {
    if (response.error) {
      dispatch({ type: TOKEN_FAILURE });
      dispatch(notificationShow('ERROR', response.error.message));
    } else {
      dispatch({ type: TOKEN_SUCCESS, payload: response.id });
    }
  };

export const funcOne = target =>
  (dispatch) => {
    dispatch({ type: TOKEN_REQUEST });
    Helper.createToken(target, (status, response) => funcTwo(status, response, dispatch ));
  };

answered Feb 3, 2017 at 10:18

Ashish

213 bronze badges

Collectives™ on Stack Overflow

redux-thunk pass dispatch to another function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related