Компонент не рендерится, но состояние редукции изменилось через перехватчики реагирования - PullRequest
Новая
       74

Компонент не рендерится, но состояние редукции изменилось через перехватчики реагирования

0 голосов
/ 20 мая 2019

В настоящее время я пытаюсь переключиться с response-redux connect () hoc на новые API-интерфейсы hooks, которые будут представлены в activ-redux 7.1.x.

Некоторые примеры уже работают, но я не могу решить следующую проблему. У меня есть следующая функция притока: 

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

Когда я нажимаю на кнопку, вызывается действие приставки ( loadCustomLanguage () ), и я вижу переключение языкового файла в redux от моих devx-файлов redux. Я ожидаю, что из-за нового содержимого мой компонент будет перерисован и отобразит новый перевод для кнопок.

Я не уверен, понял ли я все из документов 7.1.x, но я подумал, что должен использовать useDispatch () для отправки действий в редукцию.

Буду признателен за любую помощь. Если я приведу примеры того, как я это делал раньше, дайте мне знать. Заранее спасибо.

1 Ответ

0 голосов
/ 06 июня 2019

Я нашел решение моей проблемы. Вы должны использовать «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>
    );
}
...