React + Redux. Route after dispatch [Cannot read property 'then' of undefined]

Question

in my React App, after dispatching an action I want to rout to home page.

index.js

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);
ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>,
  document.getElementById("root")
);

my component that I want to rout from.

class GameElements extends Component {
  cancel = () => {const { history, cancelGame: cancelGameAlt } = this.props;
    cancelGameAlt().then(() => history.push("/HomePage"));
  };

  render() {return( /*button that calls cancel*/);}

GameElements.propTypes = {
history: PropTypes.shape({
    push: PropTypes.func.isRequired
  }).isRequired}

and the cancelGame action is defined as

export const cancelGame = () => dispatch => {
  dispatch({ type: types.PLAYER_CANCELS_GAME });
};

the action is dispatched and the state at store changes, but I at this line; cancelGameAlt().then(() => history.push("/HomePage"));get an error Cannot read property 'then' of undefined

before clicking when page renders I get Failed prop type: The prophistoryis marked as required inGameElements, but its value isundefined. but I read that react-router 4 use the history as a prop of your component.

How should I route after calling an action?

Hint: What does the `cancelGame` do? Look at what it returns. It should be a `Promise` for this to work. — Hardik Modha, Aug 30 '18 at 07:03
What are you trying to do ? As @HardikModha mentioned, you didn't include the code that is causing the problem . Edit your question and include `cancelGameAlt()` — sagi, Aug 30 '18 at 07:06
dispatch is synchronous. It doesn't return a `Promise`. For more info see https://stackoverflow.com/questions/43276291/is-store-dispatch-in-redux-synchronous-or-asynchronous — Hardik Modha, Aug 30 '18 at 07:08
I think what you want is `types.PLAYER_CANCELS_GAME` => reducer sets the `isCancelled` to true and if the value is set to true you navigate to the `HomePage`. So you need to check for that `isCancelled` flag inside your component. Are there any network requests involved when you do dispatch `PLAYER_CANCELS_GAME`? — Hardik Modha, Aug 30 '18 at 07:12
@HardikModha I just realised another warning when page renders, 'history' is undefined. — Amir-Mousavi, Aug 30 '18 at 07:26

React + Redux. Route after dispatch [Cannot read property 'then' of undefined]

0 Answers0