0

ボタンをクリックすると、ウィンドウの場所を変更する必要があるreact reduxアプリケーションに取り組んでいます。現在、ボタンクリックアクションをディスパッチし、redux-loop を使用してレデューサーでナビゲーションを実現しようとしています。

コンポーネント js

class Component {
 constructor() {
  super()  
 }

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

}

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

アクションjs

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

レデューサーjs

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

エフェクトjs

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

このアクションとは別に、副作用と状態操作を伴う多くのアクションがあるため、redux-loop です。

2 つの質問があります。

  1. navigateTo()ボタンのクリック時にコントロールが入りません。私は何を間違っていますか?

  2. ここでは状態を操作していないため、レデューサーは適切な場所ではないと感じています。ボタン クリック アクションがディスパッチされるときに、このコードを配置するのに最適な場所はどこでしょうか?

4

1 に答える 1