我当前正在尝试从react-redux connect(( hoc切换到新挂钩API,该挂钩将在React-Redux 7.1.x. <</p>
一些示例已经在起作用,但我无法解决以下问题。我有以下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中看到语言文件的切换。我希望由于新内容,我的组件会恢复reenenderd并显示按钮的新翻译。
我不确定我是否了解7.1.x文档的所有内容,但我认为我必须使用 underispatch((将操作派遣到redux。
我感谢任何帮助。如果我应该提供有关我以前如何做的例子,请告诉我。预先感谢。
我找到了解决问题的解决方案。在这种情况下,您必须使用"用途"。该组件现在看起来像这样:
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>
);
}