경로 매개 변수를 Redux 저장소 키 아래에 매핑

Question

여러 구성 요소가 데이터 원본으로 사용하는 상태 개체에 "위치"키가 있습니다. URL (Google지도와 매우 유사)에는 좌표라는 "위치"라는 매개 변수가 있습니다. 내 목표는 해당 값을 (일부 수정하여)주의 "위치"키에 매핑하는 것입니다. 그렇게하는 방법?

는 UPDATE 내가 상상할 수있는 유일한 방법은 어떻게 든 URL의 매개 변수를 미들웨어를 만들고 경로의 행동에 반응, 추출하는 것입니다 후 환원제로 처리됩니다 새로운 액션을 전달합니다. 또는 감속기를 사용하십시오. 추가 미들웨어가 필요하지 않습니다. 하지만 이것은 좋은 접근 방식이 아닌 것 같아요.

Answer 1

경로의 콜백 onEnter에서 변수 매개 변수를 가져 와서 조치를 작업장에 전달할 수 있습니다.

위의 예를 참조하십시오 : 나는 componentWillReceiveProps 이벤트에 라우터 PARAMS 소요 루트 경로에 대한 컨테이너를 만든

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

및 window.location.href 훨씬 이전 상태를하지 않는 경우 그들은 가게에 전달합니다. 코드는 github repo에 있습니다. 나는 redux-saga를 사용합니다. 그러므로 내 커스텀 이벤트 인 @@ routerParams/URL_UPDATE를 듣고 action.payload에서 모든 매개 변수를 가져 오는 것이 좋습니다.