ドキュメントには、Reduxアクション(https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions)を使用してナビゲーションイベントを発行する方法についての情報がありますが、アクションからストアにアクセスする方法はありますか?react-router-reduxにプッシュをディスパッチするアクションでストアにアクセスする方法は?
export function fetchReservationData(reservation_code, onError) {
return (dispatch) => {
fetch(apiConfig.find_my_product)
.then(function(response) {
if (response.ok) {
response.json().then(function (data) {
if (data.trolley.length > 0) {
dispatch({ type: UPDATE_TROLLEY_DATA, payload: data });
// todo: use router-redux push instead
//window.location.pathname = '/your-trolley';
dispatch(push('/your-trolley'));
} else {
dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError });
}
});
} else {
// todo: handle exception
console.log('Network response was not ok.');
dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError });
}
})
.catch(function (error) {
// todo: handle error
// handle it gracefully asked user to try again, if the problem keeps ocurring to
// talk with a staff member to report it to the backend team
console.log('There has been a problem with your fetch operation: ' + error.message);
dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError });
});
}
}
一方、それが動作するアプリケーションのエントリポイントから呼び出された場合(コメントタイムアウトを参照してください):
import React from 'react';
import ReactDOM from "react-dom";
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import { syncHistoryWithStore, routerMiddleware, push } from 'react-router-redux'
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import promise from 'redux-promise';
import reducers from './reducers';
import thunk from 'redux-thunk';
// const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
// const store = createStoreWithMiddleware(reducers);
const store = createStore(
reducers,
applyMiddleware(thunk),
applyMiddleware(routerMiddleware(browserHistory))
);
const history = syncHistoryWithStore(browserHistory, store);
// this needs to work in the actions
// setTimeout(() => {
// store.dispatch(push('/your-trolley'));
// }, 3000);
ReactDOM.render(
<Provider store={ store }>
<Router history={ history } routes={ routes } />
</Provider>,
document.getElementById('app')
);
私の行動は、ディスパッチ(プッシュ( '/ foo' を))トリガどんなヒントもありがとう!ありがとうございました!