Question

有一个＆＃34;位置＆＃34;键入状态对象，由多个组件用作数据源。在URL（非常类似于谷歌地图）中，我有一个名为＆＃34; location＆＃34;这是一个坐标。我的目标是将该值（通过一些修改）映射到州＆＃34;位置＆＃34;键。怎么做？

更新我能想象的唯一方法是创建一个中间件并对路由操作做出反应，以某种方式从URL中提取参数，然后调度将由reducer处理的新操作。或者只使用减速器，不需要额外的中间件。但我想这不是一个好方法......

Answer 1

您可以从location回调路线获取onEnter变量参数，然后将行动发送到商店。

请参阅上面的示例：

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

我已经为根路由创建了容器，它在componentWillReceiveProps事件中占用路由器参数，并且如果window.location.href没有太多先前的状态，则将它们分派给商店。您可以在github repo上看到代码。我使用redux-saga。因此，最好只听我的自定义事件：@@ routerParams / URL_UPDATE并从action.payload获取所有参数。

将路由参数映射到Redux商店的密钥

2 个答案: