Ordnen Sie einen Routenparameter dem Schlüssel eines Redux-Speichers zu

Question

Im Statusobjekt gibt es einen Schlüssel "location", der von mehreren Komponenten als Datenquelle verwendet wird. In der URL (sehr ähnlich zu Google Maps) habe ich einen Parameter namens "location", der eine Koordinate ist. Mein Ziel ist es, diesen Wert (mit einigen Änderungen) dem "location" Schlüssel des Staates zuzuordnen. Wie geht das?

UPDATE Der einzige Weg, ich ist vorstellen konnte eine Middleware zu schaffen und zu routen Aktionen, extrahieren Sie die Parameter aus der URL reagiert irgendwie, versenden Sie dann eine neue Aktion, die von einem Druckminderer verarbeitet werden. Oder verwenden Sie einfach einen Reducer, nicht mit einer zusätzlichen Middleware. Aber ich denke, das ist kein guter Ansatz ...

Answer 1

Sie können location Variable Params von onEnter Rückruf Ihrer Route, und dann versenden Aktion zu speichern.

Siehe Beispiel oben:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createStore } from 'redux'; 
import App from './App'; 
import { Route, Router, browserHistory } from 'react-router'; 

const store = createStore(rootReducer); 

const routes = (
    <Route 
    path="/location/:location" 
    component={App} 
    onEnter={handleEnter} 
    /> 
); 

function rootReducer(state = { 
    location: {}, 
}, action) { 
    switch (action.type) { 
    case 'ADD_TO_LOCATION': 
     return { 
     ...state, 
     location: action.location, 
     }; 
    default: 
     return state; 
    } 
    return state; 
} 

function handleEnter(nextState) { 
    // Map location data here. 
    // Next, we are dispatching mapped location to store. 
    store.dispatch({ 
    type: 'ADD_TO_LOCATION', 
    location: nextState.params.location, 
    }); 
} 

ReactDOM.render(<Router routes={routes} history={browserHistory} />, document.getElementById('root')); 

Answer 2

I Container für den Root-Route erstellt haben, die Router params auf componentWillReceiveProps Ereignis und versenden sie in den Laden kommt, wenn window.location.href nicht viel früheren Zustand der Fall ist. Sie können den Code auf github repo sehen. Ich benutze Redux-Saga. Daher ist es für mich besser, nur auf mein benutzerdefiniertes Ereignis zu hören: @@ routerParams/URL_UPDATE und nimm alle Parameter von action.payload.