'推'沒有顯示任何錯誤不起作用

Question

我想要的是當用戶點擊一個按鈕時改變路線。

該代碼與real-world樣本非常相似，並遵循react-router-redux中介紹的所有步驟。

減速器/ index.js：

import { combineReducers } from 'redux' 
import { routerReducer as routing } from 'react-router-redux' 
import entities from './entities' 


const rootReducer = combineReducers({ 
    entities, 
    routing 
}) 

export default rootReducer 

index.js：

import 'babel-polyfill' 
import React from 'react' 
import { render } from 'react-dom' 
import browserHistory from 'react-router/lib/browserHistory' 
import syncHistoryWithStore from 'react-router-redux/lib/sync' 
import Root from './src/web/containers/Root' 
import configureStore from './src/store/configureStore' 

const store = configureStore() 
const history = syncHistoryWithStore(browserHistory, store) 

render(
    <Root store={store} history={history} />, 
    document.getElementById('root') 
) 

Root.js：

import React, { Component, PropTypes } from 'react' 
import { Provider } from 'react-redux' 
import routes from '../routes' 
import Router from 'react-router/lib/Router' 

export default class Root extends Component { 
    render() { 
    const { store, history } = this.props 
    return (
     <Provider store={store}> 
     <div> 
      <Router history={history} routes={routes} /> 
     </div> 
     </Provider> 
    ) 
    } 
} 

Root.propTypes = { 
    store: PropTypes.object.isRequired, 
    history: PropTypes.object.isRequired 
} 

個routes.js：

import React from 'react' 
import Route from 'react-router/lib/Route' 
import App from './containers/App' 

export default (
    <Route path="" component={App}> 
    {/* Other routes */} 
    </Route> 
) 

configureStore.js：

import { createStore, applyMiddleware, compose } from 'redux' 
import thunk from 'redux-thunk' 
import rootReducer from '../reducers' 
import { apiMiddleware } from 'redux-api-middleware'; 
import {routerMiddleware, routerReducer} from 'react-router-redux' 
import browserHistory from 'react-router/lib/browserHistory' 

const createStoreWithMiddleware = applyMiddleware(apiMiddleware) (createStore); 


export default function configureStore(preloadedState) { 
    const store = createStore(
    rootReducer, 
    preloadedState, 
    compose(
     applyMiddleware(
     apiMiddleware, 
     routerMiddleware(browserHistory), 
     thunk, 
    ), 
    ) 
) 

    return store 
} 

然後我想用push在頁面這樣的：

import { push } from 'react-router-redux' 
class Test extends Component { 
    render() { 
    return (
     <button onClick={()=>push('/path')}>Test</button> 
    ) 
    } 
} 

但沒有任何反應，沒有顯示錯誤。

Answer 1

這個問題似乎是你的組件'測試'。

您必須向該組件提供商店的調度功能才能進行更改。

import { push } from 'react-router-redux'; 
import { connect } from 'react-redux'; 

@connect() 
class Test extends Component { 
    render() { 
    // Provide component with dispatch function 
    const { dispatch } = this.props; 

    return (
     <button onClick={() => dispatch(push('/path'))}> 
     Test 
     </button> 
    ) 
    } 
} 

navigation-events-via-redux-actions