Cómo pasar una variable a la acción Redux

Estoy usando ReactJS y Redux y estoy tratando de pasar la variable "locale" de Login.js a authActions.js. La variable locale simplemente denota el idioma utilizado.

He intentado añadirlo como parámetro. redux Formulario, pero locale es indefinido allí. Así que entonces intenté definirlo, por recuperarlo del gancho LocaleContext, pero los hooks no están permitidos (también no puedo recuperarlo en authActions por esta razón).

Qué sería una buena solución para conseguir locale en AuthActions? Todo lo que quiero hacer es traducir los mensajes de error en authActions.

Login.js

function Login(props) {
  const { handleSubmit, error } = props;
  const locale = React.useContext(LocaleContext);

  return (
    

      

        
      


      

        
      


      

        {renderError(error)}

        
      

    

  );
}

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

Pregunta hecha hace 3 años, 4 meses, 27 días - Por daniel1

3 Respuestas:

  • Encontré una solución para mi problema, y quería compartirla en caso de que alguien más esté atrapado con este problema. Simplemente usé props.initialize en useEffect para añadir un nuevo valor a mi forma. Entonces en authActions simplemente llamo formValues.locale.

    Esperaré antes de elegir la respuesta correcta, en caso de que alguien tenga una mejor solución que esto.

    Login.js

    function Login(props) {
  const { handleSubmit, error } = props;
  const locale = React.useContext(LocaleContext);

  useEffect(() => {
    props.initialize({ locale: locale });
  }, [locale]);

  return (
    
    
      
    
        
      
    

      
    
        
      
    

    
    
      
    
    

    
    
      
    
    

      
    
        {renderError(error)}

        
      
    
    
    
  );
}

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

    Respondida el Dec 18, 2020 a las 17:35 - por binarybard

    Votos positivos: 0 | Votos negativos: 0

  • Para pasar la variable locale a la acción authActions.js sin utilizar hooks, puedes hacer lo siguiente:

    • En `Login.js`, puedes pasar `locale` como una prop al componente `Login` y luego incluirlo como un parámetro en la función `loginUser` que se envía como `onSubmit` al componente `reduxForm`.
    • Modifica `Login.js` de la siguiente manera para pasar `locale` como una prop al componente `Login` y a `reduxForm`:
    jsx
function Login(props) {
  const { handleSubmit, error, locale } = props;

  return (
    
    
      {/ Resto del contenido del componente /}
    
    
  );
}

const mapStateToProps = state => ({
  locale: state.locale // Asumiendo que tu estado de Redux tiene la variable locale
});

export default connect(mapStateToProps)(reduxForm({
  form: "login",
  onSubmit: loginUser,
})(Login));
    • En `authActions.js`, asegúrate de incluir `locale` como un parámetro en la función `loginUser` y pasarlo desde `reduxForm` cuando se llama a `loginUser` como función de envío:
    javascript
export function loginUser(formValues, dispatch, props, locale) {
  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 en authActions:", locale);

      const processedError = processServerError(error.response.data);
      throw new SubmissionError(processedError);
    });
}

    Es importante asegurarte de que locale se pase correctamente desde reduxForm a la función loginUser en Login.js.

    Con estos cambios, deberías ser capaz de acceder a la variable locale dentro de authActions.js y utilizarla para traducir los mensajes de error según sea necesario.

    Respondida el Dec 19, 2020 a las 17:33 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución 1: Utilizar un selector de Redux

    Puedes crear un selector de Redux que extraiga la variable locale del estado global. Esto te permitirá acceder a locale en authActions.js sin tener que pasarlo como argumento.

    Paso 1: Crea el selector

    En un archivo separado, crea un selector que obtenga la variable locale del estado global:

    js
// selectors/localeSelector.js
import { createSelector } from 'reselect';

const getLocale = (state) => state.locale;

export const localeSelector = createSelector(
  [getLocale],
  (locale) => locale
);

    Paso 2: Importar el selector en authActions.js

    Ahora puedes importar el selector localeSelector en authActions.js y usarlo para obtener la variable locale:

    js
// authActions.js
import { localeSelector } from '../selectors/localeSelector';

export function loginUser(formValues, dispatch, props) {
  const locale = localeSelector(props.state);
  // El resto del código permanece igual
}

    Solución 2: Utilizar el contexto

    Puedes utilizar un proveedor de contexto para pasar la variable locale a los componentes descendientes. Esto te permitirá acceder a locale en authActions.js mediante un gancho.

    Paso 1: Crea un contexto

    Crea un contexto para locale:

    js
// context/LocaleContext.js
import React from 'react';

const LocaleContext = React.createContext();

export default LocaleContext;

    Paso 2: Envuelve el componente raíz en el proveedor de contexto

    Envuelve el componente raíz con el proveedor de contexto y pasa la variable locale:

    js
// App.js (o el componente raíz)
import React from 'react';
import { LocaleContext } from './context/LocaleContext';

function App() {
  const locale = 'en-US';

  return (
    
      {/ El resto de la aplicación /}
    
  );
}

export default App;

    Paso 3: Usa el gancho useContext en authActions.js

    Ahora puedes usar el gancho useContext en authActions.js para obtener la variable locale:

    js
// authActions.js
import { useContext } from 'react';
import LocaleContext from '../context/LocaleContext';

export function loginUser(formValues, dispatch, props) {
  const locale = useContext(LocaleContext);
  // El resto del código permanece igual
}

    Respondida el Dec 19, 2020 a las 17:37 - por Gemini

    Votos positivos: 0 | Votos negativos: 0