Question

我使用react-router-redux有一个简单的react redux应用程序。我有2条路线，一条是feed，另一条add。添加视图提供了一个表单。在表单提交时，将调度ADD_STORY操作，并且我的reducer正确设置添加故事的新状态。问题是我想在此时重定向到feed视图。我目前的方法不起作用。任何帮助将不胜感激。

我的代表：

"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "^4.4.6",
"react-router-dom": "^4.0.0",
"react-router-redux": "^5.0.0-alpha.4",
"redux": "^3.6.0"

index.js

//... other imports above
import { HashRouter } from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
import { Route } from 'react-router'

import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'

// Create a history of your choosing (we're using a browser history in this case)
const history = createHistory()

// Build the middleware for intercepting and dispatching navigation actions
const middleware = routerMiddleware(history)

// Add the reducer to your store on the `router` key
// Also apply our middleware for navigating
const store = createStore(
  reducers,
  applyMiddleware(middleware)
)

const render = () => {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <HashRouter>
            <div className={styles.app}>
          <Header />
                <div>
                  <Route exact path="/" component={Feed} />
                  <Route exact path="/add" component={AddStory} />
                </div>
              <Footer />
            </div>
          </HashRouter>
     </ConnectedRouter>
      </Provider>
    </AppContainer>,
    document.getElementById('root')
  );
};

然后我在代码的另一部分尝试从容器组件重定向

const mapDispatchToProps = (dispatch, ownProps) => {
  console.log('ownProps', ownProps)

  return {
    submitStory: (story) => {
      dispatch(createStory({
        title: story.match(/^(.+)\n?/)[1],
        body: story
      }))
    },
    doAction: (action) => {
      switch(action) {
        case "STORY_ADDED":
          console.log('PUSHING');
          ownProps.history.push('/')
          dispatch(push('/'))
          break;
        default: 
          return null
      }
    }
  }
}

我遇到了几个问题。一个是如果我尝试dispatch(ownProps.history.push('/')我在中间件中得到一个关于action未定义的错误。这很容易理解，因为ownProps.history.push('/')返回undefined;虽然它会重定向;但只有一次。如果我尝试使用来自push的{{1}}，我会返回一个正确的react-router-redux对象，但不会使用action进行重定向。

正如您所看到的，我尝试通过调用dispatch(push('/'))然后使用react-router-redux push调度来解决这种情况，因此我有适当的操作对象，但这只能运行一次。我的组件的ownProps.history.push('/')方法永远不会触发状态更新;即使明确产生一个新的国家;在视图中添加新故事我试图重定向到。

再次感谢。

如何在react redux应用程序中进行状态更新后重定向URL？

0 个答案: