2017-04-16 60 views
3

使用react-router的redux版我還沒有多少運氣。當我將產品添加到購物車時,位置確實會更改,但頁面不會更新。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')); 
      }) 
    } 

回答

0

嘗試connectingapp.js到了Redux商店,並通過mapStateToProps注入router道具。儘管你沒有明確地使用道具,但是當道具改變時,你的組件現在應該重新渲染自己和它的子項。

react-router還提供withRouter高階組件做類似的事情。但是,我有問題讓它在使用shouldComponentUpdate的應用程序在組件樹的多個級別上工作。