'react-redux subscribe to store outside of component
I am woking on localization for a react app, and for maintainability I want to define all localized text in separate files outside of the component. I have a localizationReducer which controls the selected locale - so far I've been able to work with useSelector and useDispatch hooks to interact with the reducer/store, but I'm wondering if I can subscribe to the store from a separate file which is not a react component. Here is an example of what I'm trying to do.
//Component which needs the localized text
import * as localizedText from "@localization/modules/fundsMovementTemplates"
<
<div>
<DropDown
extraClass={"localizationSelector"}
defaultValue={""}
value={localeFromStore}
listItems={localesDidNotLoad.current ? [localeOptions[0]] : localeOptions}
handleChange={(e) => updateLocale(e.target.value)}
/>
<span>{localizedText.pageTitle}</span>
</div>
//separate file with localized text
import translate from "@localization/translate"
import intl from "react-intl-universal"
export const titleText= translate(
intl,
"HOMEPAGE.labels.TITLETEXT.title",
initComplete,
"Page Title"
)
//Translate function that interacts with reducer
/*
This method wraps intl.get(), allowing for the loading of locale data asynchronously
(in LocalizationDropDown) and avoiding empty/null locale data errors/warnings.
Params (ALL REQUIRED):
1) intl: the instance of the react-intl-universal singleton
2) selector: the key of the locale value (e.g. 'RULE.title')
3) initComplete: boolean indicating the init status of the intl instance
4) defaultText: fallback in case the locale data doesn't load, etc.
*/
export const translate = (intl, selector, initComplete, defaultText) => {
if (initComplete) {
return intl.get(selector).defaultMessage(defaultText)
}
return defaultText
}
How can I subscribe a simple file like this to the store so I can import the localized text into another component?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
