如何将变量传递给Redux操作

Question

我正在使用ReactJS和Redux，并试图通过；区域设置"；从Login.js到

authActions.js我曾尝试将其作为参数添加到reduForm中，但区域设置未定义。因此，我尝试通过从LocaleContext钩子中检索它来定义它，但钩子是不允许的(出于这个原因，我也无法在authActions中检索它(。

将locale放入authActions的好解决方案是什么？我所要做的就是转换authActions中的错误消息。

登录.js

function Login(props) {
const { handleSubmit, error } = props;
const locale = React.useContext(LocaleContext);
return (
<form onSubmit={handleSubmit}>
<fieldset className="form-group">
<Field
name="email"
label="Email"
component={renderField}
type="text"
validate={[
required({
message: "this field is required",
}),
]}
/>
</fieldset>
<fieldset className="form-group">
<Field
name="password"
label={getTranslation(locale, Translations.Password)}
component={renderField}
type="password"
validate={[
required({
message: "this field is required",
}),
]}
/>
</fieldset>
<fieldset className="form-group">
{renderError(error)}
<Button type="submit" variant="contained" color="primary">
<Translation translation={Translations.Log_in} />
</Button>
</fieldset>
</form>
);
}
export default reduxForm({
form: "login",
onSubmit: loginUser,
locale: locale, // This doesn't work, locale is undefined
})(Login);

authActions.js

export function loginUser(formValues, dispatch, props) {
const locale = React.useContext(LocaleContext); // Doesn't work - cannot use hooks here.
const loginUrl = AuthUrls.LOGIN;
return axios
.post(loginUrl, formValues)
.then((response) => {
const token = response.data.key;
dispatch(authLogin(token));
localStorage.setItem("token", token);
history.push("/");
})
.catch((error) => {
console.log("how do I get locale here?", locale);
const processedError = processServerError(error.response.data);
throw new SubmissionError(processedError);
});
}
export function authLogin(token) {
return {
type: AuthTypes.LOGIN,
payload: token,
};
}

Answer 1

我为我的问题找到了一个解决方案，并想分享它，以防其他人遇到这个问题。我只是在useEffect中使用props.initialize为表单添加一个新值。然后在authActions中，我只需调用formValues.locale.

我会在选择正确答案之前等待，以防有人有比这个更好的解决方案。

登录.js

function Login(props) {
const { handleSubmit, error } = props;
const locale = React.useContext(LocaleContext);
useEffect(() => {
props.initialize({ locale: locale });
}, [locale]);
return (
<form onSubmit={handleSubmit}>
<fieldset className="form-group">
<Field
name="email"
label="Email"
component={renderField}
type="text"
validate={[
required({
message: "this field is required",
}),
]}
/>
</fieldset>
<fieldset className="form-group">
<Field
name="password"
label={getTranslation(locale, Translations.Password)}
component={renderField}
type="password"
validate={[
required({
message: "this field is required",
}),
]}
/>
</fieldset>
<fieldset className="form-group" style={{ display: "none" }}>
<Field
name="locale"
label="locale"
component={renderField}
type="text"
validate={[
required({
message: getTranslation(locale, Translations.FieldRequired),
}),
]}
/>
</fieldset>
<fieldset className="form-group" style={{ display: "none" }}>
<Field name="locale" component={renderField} />
</fieldset>
<fieldset className="form-group">
{renderError(error)}
<Button type="submit" variant="contained" color="primary">
<Translation translation={Translations.Log_in} />
</Button>
</fieldset>
</form>
);
}
export default reduxForm({
form: "login",
onSubmit: loginUser,
locale: locale, // This doesn't work, locale is undefined
})(Login);

authActions.js

export function loginUser(formValues, dispatch, props) {
const locale = formValues.locale; // WORKS!
const loginUrl = AuthUrls.LOGIN;
return axios
.post(loginUrl, formValues)
.then((response) => {
const token = response.data.key;
dispatch(authLogin(token));
localStorage.setItem("token", token);
history.push("/");
})
.catch((error) => {
console.log("Locale is here!", locale);
const processedError = processServerError(error.response.data);
throw new SubmissionError(processedError);
});
}
export function authLogin(token) {
return {
type: AuthTypes.LOGIN,
payload: token,
};
}