ボタンをクリックすると、ウィンドウの場所を変更する必要がある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 つの質問があります。
navigateTo()
ボタンのクリック時にコントロールが入りません。私は何を間違っていますか?ここでは状態を操作していないため、レデューサーは適切な場所ではないと感じています。ボタン クリック アクションがディスパッチされるときに、このコードを配置するのに最適な場所はどこでしょうか?