redux点击按钮页面不发生变化

最新推荐文章于 2023-01-02 22:03:08 发布

木木学长

最新推荐文章于 2023-01-02 22:03:08 发布

阅读量410

点赞数

分类专栏： redux react 文章标签： javascript 前端 react.js

本文链接：https://blog.youkuaiyun.com/qq_43599049/article/details/122172987

版权

react 同时被 2 个专栏收录

11 篇文章

订阅专栏

redux

3 篇文章

订阅专栏

在Redux应用中，点击按钮未导致页面更新是因为缺少对store的订阅。通常，需要在actionCreators中引用constants来创建action，并在组件的componentDidMount生命周期方法中订阅store的变化，当state更新时通过this.setState重新渲染界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述正常你定义action肯定要定义一些常量，这个常量是干什么用的呢？因为reducer要根据action.type来修改state并且actionCreators要根据这个来创建action，在多个地方共有某个东西最好在constant来初始化。这里主要初始化了如下四个：

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
export const ADD_NUMBER = 'ADD_NUMBER'
export const SUB_NUMBER = 'SUB_NUMBER'

之后为了你的action创建变得模板化，你需要定义actionCreators，这些actionCreators呢又引用了上面的constants：

import {
    ADD_NUMBER,
    SUB_NUMBER,
    INCREMENT,
    DECREMENT,
} from './constant'

export const addAction = num => ({
    type: ADD_NUMBER,
    num,
})
export const subAction = num => ({
    type: SUB_NUMBER,
    num
})
export const incAction = () => ({
    type: INCREMENT
})
export const decAction = () => ({
    type: DECREMENT
})

这里创建了一个简单的界面，即
点击+1触发store.dispatch(incAction())
点击-1触发store.dispatch(decAction())
点击+5出发store.dispatch(addAction(5))
点击-5触发store.dispatch(subAction(5))

整个流程就是点击+1->触发dispatch->reducers来进行处理->更新state。
但是问题是现在点击按钮并没有发生变化，原因是并没有监听变化，因此其实需要在页面中定义store.subscribe()来监听变化，之后来对页面进行重新渲染，返回jsx，然后react再根据diff算法来修改界面。
那么在什么生命周期中来做监听呢？答案是componentDidMount，在页面首次渲染完成后来做监听，当发生变化后，触发this.setState({counter: store.getState().counter})来重新渲染界面
在这里插入图片描述