React Router v4 с Redux - рассылка не пройдена

Question

Итак, я пытался переключить свое приложение на React Router v4 (API сильно изменился), и вот где я достиг:

Настройка маршрутизатора

const createStoreWithMiddleware = applyMiddleware(
   thunkMiddleware,
   createLogger
)(createStore);
const store = createStoreWithMiddleware(rootReducer);

const RouterLayout = () => (
    <Provider store={store}>
        <App>
            <Switch>
                <Route component={Login} path="/login" />
                <Route component={AccountDetails} path="/account/:id" />
            </Switch>
        </App>
    </Provider>
);

const routes = (
    <HashRouter>
        <RouterLayout />
    </HashRouter>
);

ReactDOM.render(routes, document.getElementById("app-container"));

Теперь моя проблема в том, что по какой-то причине я не могу подключить излишек к моим компонентам:

export class Login extends React.Component<any, any> {
    componentDidMount() {
        console.log(this.props);
        // this.props.dispatch is undefined 
        // I'm getting however router props: 
        // match: Object, location: Object, history: Object, staticContext: undefined)
    }

    render() {
        return (
            <div>
                This is the Login Component
            </div>
        );
    }
}

export default connect((state: AppState): any => {
    return state;
})(Login);

Интересно, что App компонент может подключиться и получить доступ к dispatch без проблем, но Login не имеет его Я почти уверен, что делаю что-то не так, но не знаю, что именно.

Answer 1

Если this.props.dispatch недоступен, то, скорее всего, ваш компонент не подключен к Redux.

Я думаю, что проблема здесь в том, что вы экспортируете Login дважды, один как компонент реагирования, а другой как компонент, подключенный к хранилищу резервов (по умолчанию экспорт). В файле, где существует RouterLayout, вы, вероятно, импортируете логин с помощью фигурных скобок, и, таким образом, компонент Login здесь является компонентом, который не подключен к избыточному.

Кроме того, ваш createStore выглядит неправильно. Это должно выглядеть следующим образом:

const createStoreWithMiddleware = (reducer) => {
  const middlewares = applyMiddleware(
     thunkMiddleware,
     createLogger
  );

  return createStore(
    reducer,
    middlewares
  );
}

const store = createStoreWithMiddleware(rootReducer);