javascript - reactjs redux

Transición a otra ruta en una acción asíncrona redux exitosa

Question

Tengo un conjunto bastante simple de componentes de reacción:

• container que se engancha en redux y maneja las acciones, almacena suscripciones, etc.
• list que muestra una lista de mis artículos
• new que es un formulario para agregar un nuevo elemento a la lista

Tengo algunas rutas de react-router siguiente manera:

<Route name=''products'' path=''products'' handler={ProductsContainer}>
<Route name=''productNew'' path=''new'' handler={ProductNew} />
<DefaultRoute handler={ProductsList} />
</Route>

para que se muestre la list o el form pero no ambos.

Lo que me gustaría hacer es que la aplicación vuelva a enrutarse a la lista una vez que se haya agregado con éxito un nuevo elemento.

Mi solución hasta ahora es tener un .then() después del dispatch asíncrono:

dispatch(actions.addProduct(product)
.then(this.transitionTo(''products''))
)

¿Es esta la forma correcta de hacer esto o debería activar otra acción de alguna manera para activar el cambio de ruta?

Answer 1

Para aquellos que usan una capa de API de middleware para abstraer su uso de algo como isomorphic-fetch , y también están usando redux-thunk , simplemente pueden encadenar su Promesa de dispatch dentro de sus acciones, de esta manera:

import { push } from ''react-router-redux'';
const USER_ID = // imported from JWT;
function fetchUser(primaryKey, opts) {
// this prepares object for the API middleware
}
// this can be called from your container
export function updateUser(payload, redirectUrl) {
var opts = {
method: ''PUT'',
headers: {
''Content-Type'': ''application/json''
},
body: JSON.stringify(payload)
};
return (dispatch) => {
return dispatch(fetchUser(USER_ID, opts))
.then((action) => {
if (action.type === ActionTypes.USER_SUCCESS) {
dispatch(push(redirectUrl));
}
});
};
}

Esto reduce la necesidad de agregar bibliotecas a su código como se sugiere here , y también co-ubica muy bien sus acciones con sus redireccionamientos como se hace en redux-history-transitions .

Así es como se ve mi tienda:

import { createStore, applyMiddleware } from ''redux'';
import rootReducer from ''../reducers'';
import thunk from ''redux-thunk'';
import api from ''../middleware/api'';
import { routerMiddleware } from ''react-router-redux'';
export default function configureStore(initialState, browserHistory) {
const store = createStore(
rootReducer,
initialState,
applyMiddleware(thunk, api, routerMiddleware(browserHistory))
);
return store;
}

Answer 2

Sé que llego un poco tarde en la fiesta, ya que react-navigation ya está incluido en la documentación de react-native, pero aún así puede ser útil para el usuario que ha usado / usando Navigator api en sus aplicaciones. lo que probé es un poco hack, estoy guardando la instancia del navegador en el objeto tan pronto como renderScene sucede

renderScene(route, navigator) {
const Component = Routes[route.Name]
api.updateNavigator(navigator); //will allow us to access navigator anywhere within the app
return <Component route={route} navigator={navigator} data={route.data}/>
}

mi archivo api es algo como esto

''use strict'';
//this file includes all my global functions
import React, {Component} from ''react'';
import {Linking, Alert, NetInfo, Platform} from ''react-native'';
var api = {
navigator,
isAndroid(){
return (Platform.OS === ''android'');
},
updateNavigator(_navigator){
if(_navigator)
this.navigator = _navigator;
},
}
module.exports = api;

ahora en tus acciones simplemente puedes llamar

api.navigator.push ({Nombre: ''routeName'', datos: WHATEVER_YOU_WANTED_TO_PASS)

solo necesita importar su api desde el módulo.

Answer 3

Si está utilizando react-redux y react-router , creo que este enlace proporciona una excelente solución.

Aquí están los pasos que utilicé:

• Pase un accesorio de history enrutador de reacción a su componente, ya sea renderizando su componente dentro de un componente <Route/> enrutador de reacción o creando un Componente de orden superior usando withRouter .
• A continuación, cree la ruta a la que desea redirigir (llamé a la mía).
• Tercero, llame a su acción redux con history y to .
• Finalmente, cuando desee redirigir (por ejemplo, cuando se resuelva su acción redux), llame a history.push(to) .

Answer 4

Si no desea usar una solución más completa como github.com/acdlite/redux-react-router , puede usar Redux History Transitions que le permite escribir código como este:

export function login() {
return {
type: LOGGED_IN,
payload: {
userId: 123
}
meta: {
transition: (state, action) => ({
path: `/logged-in/${action.payload.userId}`,
query: {
some: ''queryParam''
},
state: {
some: ''state''
}
})
}
};
}

Esto es similar a lo que sugirió, pero un poco más sofisticado. Todavía usa la misma biblioteca de history debajo del capó, por lo que es compatible con React Router.

Answer 5

Terminé creando un middleware súper simple que se ve así:

import history from "../routes/history";
export default store => next => action => {
if ( ! action.redirect ) return next(action);
history.replaceState(null, action.redirect);
}

Entonces, a partir de ahí, solo debe asegurarse de que sus acciones successful tengan una propiedad de redirect . También tenga en cuenta que este middleware no se activa next() . Esto es a propósito, ya que una transición de ruta debe ser el final de la cadena de acción.