'プッシュ'はエラーを表示せずに動作しません

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