0

状態オブジェクトには、複数のコンポーネントでデータ ソースとして使用される「場所」キーがあります。URL（Googleマップに非常に似ています）には、座標である「場所」というパラメーターがあります。私の目標は、その値を (多少の変更を加えて) 状態の「場所」キーにマップすることです。どうやってするか？

UPDATE 私が想像できる唯一の方法は、ミドルウェアを作成してルートアクションに反応し、何らかの方法でURLからパラメーターを抽出してから、リデューサーによって処理される新しいアクションをディスパッチすることです。または、追加のミドルウェアを必要とせずに、レデューサーを使用するだけです。しかし、これは良いアプローチではないと思います...

4

2 に答える 2

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'));
于 2016-07-01T13:56:50.690 に答える