Side effect function is not getting called in Cmd.run using redux-loop

Question

I am working on a react redux application where in, on a button click I need to change my window location. As of now, I am dispatching the button click action and trying to achieve the navigation in reducer using redux-loop.

Component js

class Component {
 constructor() {
  super()  
 }

 render() {
  return (
   <button onClick={() => this.props.onButtonClick()}>Navigate</button>
  )
 }

}

 const mapDispatchToProps = (dispatch) => {
    return {
        "onButtonClick": () => dispatch(handleClick())
    };
}

Action js

export const handleClick = () => ({
    type: NAVIGATE
});

Reducer js

export default (state = {}, action) => {
    if (action.type === NAVIGATE) {
        return loop(state, Cmd.run(navigateTo));
    }
};

Effect js

export const navigateTo = () => {
 window.location = "https://www.stackoverflow.com";
}

Apart from this action, I have lot many actions that involve side effect as well as state manipulation, hence redux-loop.

I have two questions:

1. Control is not going into navigateTo() on button click. What am I doing wrong?

2. I feel reducer is not a right place for it as we are not manipulating state here. What would be the best place to put this piece of code when button click action is dispatched?

Answer 1

the code you have looks correct. Did you use the store enhancer when creating your redux store? Did you try setting a breakpoint in your reducer and verifying it gets called as you expect? https://redux-loop.js.org/docs/tutorial/Tutorial.html