score:6

Accepted answer

I found out the solution to my problem. You have to use "useSelector" in this case. The component does now look like this:

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

Related Query

More Query from same tag