Как перенаправить URL-адрес после обновления состояния в приложении реагировать на избыточность?

У меня есть простое приложение "Реакция редукса", использующее "Реакция-маршрутизатор-редукция". У меня есть 2 маршрута, один feed другой add, Представление добавления предоставляет форму. На бланке представления ADD_STORY действие отправлено, и мой редуктор правильно устанавливает новое состояние с добавленной историей. Проблема в том, что я хотел бы перенаправить в этот момент 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('/') возвращает неопределенное значение; хотя он будет перенаправлять; но только один раз. Если я попытаюсь использовать push это исходит от react-router-redux Я правильно понимаю action объект возвращен, но без перенаправления dispatch(push('/')),

Как вы видите, я попытался исправить ситуацию, позвонив ownProps.history.push('/') затем диспетчеризация с помощью push-router-router-redux, чтобы у меня был правильный объект действия, но это работает только один раз. Мой компонент shouldComponentUpdate метод никогда не срабатывает при обновлении состояния; хотя новое государство явно произведено; добавление новой истории в представление, к которому я пытаюсь перенаправить.

Еще раз спасибо.

0 ответов

Другие вопросы по тегам