组件不会重新渲染，但 redux 状态已通过反应钩子更改

Posted 2023-02-22

【中文标题】组件不会重新渲染，但 redux 状态已通过反应钩子更改

【英文标题】：Component does not rerender but redux state has changed via react hooks

【发布时间】：2019-10-06 17:51:26

【问题描述】：

我目前正在尝试从 react-redux connect() hoc 切换到将在 react-redux 7.1.x 中引入的新 hooks api。

一些示例已经在运行，但我无法解决以下问题。我有以下 redux 功能：

    export const translate = key => (dispatch, getState) =>
    getState().translations.data[key] || "";

它将密钥翻译成给定的语言。在我的组件中，我目前正在调用这样的函数：

import React,  Fragment, useCallback  from "react";
import  Button  from "@material-ui/core";

import  useDispatch  from "react-redux";

import  LanguageActions  from "../../redux/actions";

export default function LanguageSwitcher() 
    const dispatch = useDispatch();

    const translateKey = useCallback(
        key => dispatch(LanguageActions.translate(key)),
        []
    );
    const requestCustomLanguage = useCallback(
        requestedLanguage =>
            dispatch(LanguageActions.loadCustomLanguage(requestedLanguage)),
        []
    );

    return (
    <Fragment>
        <Button color="primary" onClick=() => requestCustomLanguage("de")>
            translateKey("german")
        </Button>
        |
        <Button
            color="secondary"
            onClick=() => requestCustomLanguage("en")
        >
            translateKey("english")
        </Button>
    </Fragment>
    );

当我单击按钮时，会调用 redux 操作 (loadCustomLanguage())，我可以从我的 redux devtools 中看到 redux 中语言文件的切换。我希望由于新内容，我的组件会重新渲染并显示按钮的新翻译。

我不确定我是否理解了 7.1.x 文档中的所有内容，但我认为我必须使用 useDispatch() 将操作分派给 redux。

如果有任何帮助，我将不胜感激。如果我应该提供我以前如何做的例子，请告诉我。提前致谢。

【参考方案1】：

我找到了解决问题的方法。在这种情况下，您必须使用“useSelector”。该组件现在看起来像这样：

import React,  Fragment, useCallback  from "react";
import  useDispatch, useSelector  from "react-redux";
import  Button  from "@material-ui/core";

import  LanguageActions  from "../../../../redux/actions";

export default function LanguageSwitcher() 
    const dispatch = useDispatch();

    const requestCustomLanguage = useCallback(
        requestedLanguage =>
            dispatch(LanguageActions.loadCustomLanguage(requestedLanguage)),
        []
    );

    const useTranslations = () =>
        useSelector(state => state.translations.data, []);

    const translations = useTranslations();

    return (
    <Fragment>
        <Button color="primary" onClick=() => requestCustomLanguage("de")>
            translations.english
        </Button>
        |
        <Button
            color="secondary"
            onClick=() => requestCustomLanguage("en")
        >
            translations.german
        </Button>
    </Fragment>
    );

【讨论】：

你应该将dispatch添加到useCallback作为依赖，见：react-redux.js.org/next/api/hooks#usedispatch