'push' 在不显示任何错误的情况下不起作用

Question

我想要的是在用户单击按钮时更改路由。

代码与real-world sample and all the steps introduced in react-router-redux非常相似。

reducer/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

问题似乎是您的组件 'Test'。

您必须向该组件提供商店的调度功能，以便推送进行更改。

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

'push' 在不显示任何错误的情况下不起作用

'push' does not work without showing any error

reactjs

redux

react-router-redux