2015-11-19 27 views
15

AggiornamentoRedux; accedere ad altre parti dello Stato quando si utilizza riduttori composte tramite combineReducers

Grazie a @Dominic Tobias e @gabdallah per avvistare il mio errore imbarazzante.

La risposta corretta è ovviamente;

quindi prova a verificare action.payload.

Gli altri commenti relativi all'istruzione switch e all'oggetto azione si riferiscono a errori che ho apportato nel mio esempio, che ho corretto da allora.


Immagina di aver combinato i seguenti due riduttori;

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

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

Desidero modificare lo stato delle voci in base a un'altra parte dello stato globale, in questo caso; lo stato del router fornito da redux-router, per esempio per implementare l'impaginazione.

Come potrei fare qualcosa di simile?

// 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 
    } 
} 

Altri approcci che vengono in mente;

  • collegare lo stato del router alla componente Entries percorso, utilizzare il metodo del ciclo di vita componentWillMount per controllare lo stato del router e chiamare un creatore azione con i valori di pagina e limite mutando lo stato a sua volta le voci. Questo funzionerebbe; tuttavia sto usando qualche middleware di transizione per chiamare un metodo statico fetchData sul componente del percorso prima di montarlo, quindi i dati vengono scaricati, quindi il creatore dell'azione di paginazione verrà chiamato in seguito; non il comportamento desiderato.
  • ascolta le azioni del router da qualche altra parte (ad esempio un modulo di router dedicato redux), chiama un creatore di azioni nel negozio di voci, ma non sono sicuro di quanto bene si adatti a redux-router o come ottenere l'accesso al router parte del negozio globale.
  • non farlo affatto; semplicemente interrogare lo stato del router nel metodo statico fetchData

Altre informazioni utili;

L'implementazione in questione è universale App fortemente ispirato reagire-redux-universal-hot-esempio

dipendenze rilevanti

  • reagiscono 0.14.2
  • redux 3.0.3
  • reagiscono -router 1.0.0-rc3
  • redux-router 1.0.0-beta3

Come posso ottenere questo o simili comportamenti? Sto forse pensando a questo nel modo giusto?

+1

azioni sono un oggetto di tipo e di un payload opzionale. Come menzionato da @Dominic Tobias, dovresti attivare la proprietà type dell'azione e inviare la route come payload al riduttore. –

risposta

8

Indietro nei vecchi giorni prima le cose sono più semplici per un popolo sviluppatore dovrebbe ascoltare l'evento popstate sull'oggetto storia;)

Sembra che le informazioni richieste è in azione?

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

e l'azione:

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

Quindi provare a controllare action.payload.

Tuttavia vostra istruzione switch utilizza action invece di action.type quindi c'è qualcosa di sospetto lì .. Non dovrebbe essere necessario fare action = {} sia - vedere http://redux.js.org/docs/basics/Reducers.html

+2

Ovviamente corretto! –

Problemi correlati