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>
);
}
Source: stackoverflow.com
Related Query
- Component does not rerender but redux state has changed via react hooks
- react component state change after ajax call but does not rerender component
- Why does React rerender when the state is set to the same value the first time via an onClick event on DOM, but not react-native?
- Redux reducer does not force a rerender on my React Component although I mutated the state
- React component not updating when store state has changed
- In react class component why is the state not being changed in the first instance of button click? But in the second instance it gets updated?
- In React useEffect does not update after the value has changed from other component
- router changed but component does not rerender
- Functional Component does not rerender after state changes [ React ]
- React component does not update with the change in redux state
- React test passes but component does not work properly when state updated in document.addListener handler
- The state changed but the render method from react does not trigger
- React component that's rendered dynamically does not rerender on parent state changes
- React component not rerendring when state is changed with Redux
- React component not refreshing when redux state has been updated with successful action
- Why my React component does not rerender when Set state was changed?
- React Component does not re rendering when updating an object in state hooks
- React redux state is changed but in component view it doesn't update the UI
- State updates but react component does not
- Component update but state does not update redux toolkit
- react component does not rerender after update state
- React - Redux State update but not rendered in the component
- React updates the state but not the component with Redux
- Redux state change but react will not Rerender
- react redux does not return updated state when component load
- React parent component state updates but child does not re-render
- React Component Does not Always Rerender After State Change
- React-redux component does not rerender on store state change
- React Redux Store updating, but component not re-rendering
- Successful dispatch does not cause re-render even though state has been changed
More Query from same tag
- How to prevent UI freeze when calling API with axios
- how to redirect routes in Netlify using vite and react?
- Reducer is not called even after action is dispatched and payload is received
- React Testing: Cannot read property 'toLowerCase' of undefined
- How to pass props to Filters in React Table
- Why does an array of objects behave differently when imported VS hard coded in a component?
- Sort an array in React useEffect() with Typescript
- Accessing methods when using react-bodymovin to loop animation segments
- Give new item when button clicked
- React functional: Cannot read properties of undefined, API. Acess to child
- Is there a way to pass state to pages in Gatsby?
- Calling functions in componentDidUpdate. Error: React limits the number of nested updates
- TypeError: Cannot read properties of undefined (reading 'reduce')
- State doesn't get set with this.setstate in React form
- React leaflet map get corners lat and long
- One dropdown overwriting another's value
- Unable to Read Custom Environment Variables in NX App
- Create Array and fill with index plus one in JavaScript
- the whole text gets cleared when trying to clear the selected word or character
- eslint: Component Definition is missing displayName
- How to use usestate with object in ReactJS?
- How to make a React component setState() based on a Redux state change?
- Why reducer function return only proxy? redux/toolkit
- How can I formatMessage with a tags (links) using react-intl?
- numberOfLines TextInput property not working
- using variables in gql apollo query
- Formatted tooltip in Semantic UI
- How to include a Font Awesome icon in React's render()
- Rendered Component doesn't show in storybook
- Listening to sails socket in react