将路由参数映射到 Redux 存储的键下

Question

状态对象中有一个"location"键，被多个组件用作数据源。在 URL（非常类似于 google 地图）中，我有一个名为 "location" 的参数，它是一个坐标。我的目标是将该值（经过一些修改）映射到州的 "location" 键。怎么做？

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

Answer 1

您可以从您的路由的 onEnter 回调中获取 location 可变参数，然后将操作发送到存储。

参见上面的示例：

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 存储的键下

Map a route parameter to under a Redux store's key

reactjs

redux

react-router

react-router-redux