javascript - react - Redux; acceder a otras partes del estado al usar reductores compuestos a través de combineReducers

redux react native español

Question

Actualizar

Gracias a @Dominic Tobias y @gabdallah por detectar mi vergonzoso error.

La respuesta correcta es, por supuesto;

así que intente comprobar action.payload .

Los otros comentarios sobre la declaración de cambio y el objeto de acción nos estamos refiriendo a los errores que hice en mi ejemplo, que he corregido desde entonces.

Imagine que he combinado los siguientes dos reductores;

import { combineReducers } from ''redux''
import { routerStateReducer } from ''redux-router''
import entries from ''./entries''

export default combineReducers({
  router: routerStateReducer,
  entries
})

Me gustaría modificar el estado de las entradas en función de otra parte del estado global, en este caso; el estado del enrutador proporcionado por redux-router para, por ejemplo, implementar la paginación.

¿Cómo podría hacer algo como esto?

// entries.js
import { ROUTER_DID_CHANGE } from ''redux-router/lib/constants''
const initialState = {}

function entries (state = initialState, action) {
  switch (action.type) {
    case ROUTER_DID_CHANGE:
      // How can I access `state.router` here in order to do something like this;
      if (routerState.location.pathname === ''/entries'') {
        return {
          ...state,
          page: routerState.location.query.page || state.page,
          limit: routerState.location.query.limit || state.limit
        }
      }
      return state
  }
}

Algunos otros enfoques que vienen a la mente;

• conecte el estado del enrutador al componente de enrutamiento de Entries , use el método del ciclo de vida componentWillMount para verificar el estado del enrutador y llame a un creador de acción con la página y los valores límite que mutan las entradas a su vez. Esto funcionaría; sin embargo, estoy usando un middleware de transición para llamar a un método fetchData estático en el componente de ruta antes de montarlo, de modo que se obtienen los datos, luego se llamará al creador de la acción de paginación; no es el comportamiento deseado
• escucha las acciones del enrutador en otro lugar (es decir, un módulo redux de enrutador dedicado), llama a un creador de acciones en la tienda de entradas, pero no estoy seguro de qué tan bien encaja con redux-router o cómo accedería a la parte del enrutador de la tienda global
• no hagas esto en absoluto; simplemente consulte el estado del enrutador en el método fetchData estático

Otra información útil;

La implementación en cuestión es Universal App fuertemente inspirada por react-redux-universal-hot-example

Deps relevantes

• reaccionar 0.14.2
• redux 3.0.3
• react-router 1.0.0-rc3
• redux-router 1.0.0-beta3

¿Cómo puedo lograr esto o un comportamiento similar? ¿Estoy pensando en esto de la manera correcta?

Answer 1

En los viejos tiempos, antes de que las cosas fueran más simples para un desarrollador, la gente escuchaba el evento popstate en el objeto del historial;)

Parece que la información requerida está en la acción?

history.listen((error, nextRouterState) => {
 ...
 store.dispatch(routerDidChange(nextRouterState));

y la acción:

export function routerDidChange(state) {
  return {
    type: ROUTER_DID_CHANGE,
    payload: state
  };
}

Por lo tanto, intente comprobar action.payload .

Sin embargo, su instrucción switch usa action lugar de action.type por lo que hay algo sospechoso allí. Tampoco debería tener que hacer action = {} ; consulte http://redux.js.org/docs/basics/Reducers. .html