Come connettersi al redux store dal react-router onEnter hook?

Mi piacerebbe utilizzare il hook onEnter del react-router per controllare una variabile nel mio redux store quando viene caricato il percorso.Come connettersi al redux store dal react-router onEnter hook?

Secondo la documentazione, onEnter:

... riceve lo stato successivo router come primo argomento. La funzione replaceState può essere utilizzata per attivare una transizione verso un URL diverso.

Nessun negozio superato. È possibile connettersi al negozio redux da questo hook? Ho provato tutti i tipi di cose ma non riesco a trovare un modo per raggiungere questo obiettivo.

Versioni sto usando:

"react-redux": "^4.0.0", 
"react-router": "1.0.0-rc1", 
"redux": "^3.0.0",

fonte

2015-11-02 Josh

farvi percorsi una funzione che prende il negozio nel parametro

export default (store) => { 
return (
    <Route handler={App} path="/"> 
    <Route path="mypath" component={handler} onEnter={myHook(store)}> 
    <Route> 
) 
};

fare lo stesso nel tuo gancio di transizione

export const myHook = (store) => { 
    return (location, replaceWith) => { 
    // Do something with your store 
    } 
};

Quindi, supponendo di creare il tuo negozio e il router nello stesso presentare

const router = (
      <Provider store={store}> 
       <Router history={history}> 
        {routes(store)} 
       </Router> 
      </Provider> 
     );

fonte

2016-01-06 10:04:15 ganmor

Questo non ha funzionato per me. Usando RR v 2.0.0-rc5, se ho questo (scusa per la formattazione): '\t \t \t ', e quindi le rotte hanno questo aspetto: 'export di default (oggetti di scena) => { \t ritorno [ \t \t {percorso: "/", componente: AppWrapper} ]}; '... allora ho questo nella console:' Attenzione: [reagire-router] È non può cambiare ; sarà ignorato'. Sto facendo qualcosa di stupido (e, si spera, facilmente correggibile)? – hairbo

Potete indicarmi un esempio più completo. (Forse potrebbe esserci) Se ricordo che l'avviso si verifica correttamente se il vostro componente Router è rerenderizzato. – ganmor

Ok, aspetta, penso di aver letto male il tuo esempio. Al momento non ho un senso (posso crearne uno se necessario), ma quello che stavo cercando di fare era passare l'output del Redux store al Router, piuttosto che passare l'oggetto "store" stesso. Nel primo caso, ciò innesca (sono piuttosto sicuro) il re-rendering degli eventi su , che a RR non sembra piacere. In quest'ultimo caso, si ha accesso al negozio, e quindi all'interno di 'onEnter()', si farebbe 'store.getState()' per ottenere lo stato corrente dell'app Redux. – hairbo

Si potrebbe creare store.js di file e l'esportazione negozio finale (lo stesso si passa a redux)

Ad es

import configureStore from 'utils/configure-store.js'; 

const store = configureStore(); 
export default store;

e quindi importare al vostro file router e leggere lo stato da store.getState()

fonte

2015-11-03 12:00:29

Aggiungere un esempio di codice alla risposta – Green

versione 4 di Reagire Router migration documentation consiglia di utilizzare i metodi del ciclo di vita dei componenti di gestire le modifiche.

Ad esempio, utilizzare componentWillMount anziché onEnter o rispondere ai cambiamenti di stato tramite componentWillReceiveProps.

Quindi nel tuo componente stesso:

import { browserHistory } from 'react-router'; 

... 

componentWillMount() { 
    if (someConditionIsTrue) { 
    browserHistory.push('/your/new/path'); 
    } 
}

Per i punti bonus si potrebbe scrivere questo come un Higher Order Component che avvolge semplicemente il vostro componente originale. Rendendo più facile condividere questa logica tra tutti gli altri componenti che richiedono lo stesso comportamento.

fonte

2017-05-11 09:56:41

Come connettersi al redux store dal react-router onEnter hook?

risposta

Problemi correlati