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

Question

我目前正在尝试从 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。

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

Answer 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>
    );
}