Saltar al contenido

Cómo hacer la transición a otra ruta en la exitosa acción Async Redux

Comencemos con los creadores de acción y un reductor.

ui.js

En el archivo ui.js, crearemos la acción REDIRECT, y en su carga útil, pasaremos el enlace de la página de redireccionamiento. He incluido una declaración console.log() para que sea más evidente cuando se envíe la acción.

Cómo hacer la transición a otra ruta en la exitosa acción Async Redux
Cómo hacer la transición a otra ruta en la exitosa acción Async Redux
1234567exportconstREDIRECT="REDIRECT";// action creatorsexportconstredirect=link={{console.log("=== REDIRECT ACTION DISPATCHED ===");return{ type:REDIRECT, payload: link };};

js

register.js

En el archivo register.js, crearemos una acción de REGISTER, que se enviará cuando el usuario haga clic en el botón Submit del formulario de registro y enviará los datos del usuario en la carga útil.

123456789exportconstREGISTER="REGISTRO";exportconstregister=user=;{console.log("=== REGISTER ACTION DISPATCHED ===");return{ type:REGISTRO, payload: user };};

js

api.js

Todas las acciones relacionadas con las solicitudes de red como API_REQUEST, API_SUCCESS y API_ERROR se incluirán en el archivo api.js.

1234567891011121314151617181920212223242526272829/// action typesexportconstAPI_REQUEST="API_REQUEST";exportconstAPI_SUCCESS="API_SUCCESS"; exportconstAPI_ERROR="API_ERROR";exportconstCANCEL_API_REQUEST="CANCEL_API_REQUEST";// action creatorsexportconstapiRequest=({ url, method, data })=[[return{ type: API_REQUEST, meta:{ url, método, datos };};exportconstcancelApiRequest=()= &gt {return{ type:CANCEL_API_REQUEST};};exportconstapiSuccess=({ response })=>({ type: API_SUCCESS, payload: response});exportconstapiError=({ error })=>({ tipo:API_ERROR, payload: error});

js

reducer.js

El reductor será razonablemente simple; almacenaremos el enlace de redireccionamiento en la tienda. No necesitamos añadir los datos del usuario aquí, ya que no será usado en ningún componente de nuestra aplicación.

12345678910constreductor=(state ={}, action)={;{switch(action.type){caseREDIRECT:return{ redirectTo: action.payload};default:return state;}};exportdefault reducer;

js

En la siguiente sección, empezaremos a escribir el formulario de inscripción.