3
react-routerのレデュックスバージョンを使用したことはあまりありませんでした。カートに商品を追加すると、はに変更されますが、ページは更新されません。react-router-reduxは場所の変更時にページを更新しません
これまでの設定です。他のすべてが新しいルータで動作し、カートにアイテムを追加するとRESTサーバーから正常に戻ってきます。ただし、自分のアクションファイルにpushを使用しても、ページは更新されません。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import { ConnectedRouter, routerMiddleware } from 'react-router-redux';
import reducers from './reducers';
import App from './components/app';
const history = createHistory();
const store = createStore(
reducers,
applyMiddleware(routerMiddleware(history), thunk)
);
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
document.getElementById('app')
);
app.js
import React from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import Cart from '../containers/cart';
import Home from './home';
import Checkout from '../containers/checkout';
import Products from '../containers/products';
const App =() => (
<Router>
<div className="app">
<Route exact={true} path="/" component={Home} />
<Route path="/cart" component={Cart} />
<Route path="/checkout" component={Checkout} />
<Route path="/products/:id/:url_title" component={Products} />
</div>
</Router>
);
export default App;
./reducers
import { reducer as FormReducer } from 'redux-form';
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
const rootReducer = combineReducers({
router: routerReducer,
other: otherReducers
});
export default rootReducer;
./actions
import { push } from 'react-router-redux';
export function addProduct(props) {
return dispatch =>
axios.post(`${ROOT_URL}/api`, props, config)
.then(response => {
dispatch(push('/cart'));
})
}