Невозможно получить доступ к хранилищу редуксов после добавления реагирующей маршрутизации MapStateToProps не вызывается

Question

Я учу редукцию. Написал несколько простых компонентов для извлечения данных из API. Все работало нормально, пока я не добавил маршрутизацию.

Я завершаю свой роутер с провайдером. У меня есть маршрут '/ cars' и компонент VisibleCarList, который обращается к магазину с помощью Connect. При доступе к '/ cars' по ссылке или по прямому URL (пробовал оба, один и тот же результат) mapStateToProps вообще не вызывается, не может видеть никаких редукционных реквизитов.

Однако, если я go например '/ example' с маршрутизируемым компонентом приложения, в котором есть VisibleCarList, все работает нормально.

Потратил уже несколько часов, и я до сих пор не понимаю, почему он не может подключиться к магазину. Любые идеи?

index. js

const store = createStore( reducer, composeEnhancers(
    applyMiddleware(thunkMiddlewares)))

ReactDOM.render(
    <Provider store={store}>
       <Router>
          <Route path="/example" component={App}/>
          <Route path="/cars"  component={VisibleCarList}/>        
       </Router>       
    </Provider>
, document.getElementById('root'));

VisibleCarList

export class VisibleCarList extends Component {
    componentDidMount() {
        this.props.getCarsPage(0);
    }
    render() {
        ...
    }
}

const mapStateToProps = (state) => {
    return{
        cars: state.cars,
        pagination: state.pagination,
    }
}

const mapDispatchToProps = {
    getCarsPage: fetchCarPage,
    setPage: setCurrentPage,
}

export default connect(mapStateToProps, mapDispatchToProps)(VisibleCarList)

Приложение. js

function App(props) {
  return (
        <Box bgcolor="primary.light">
          <NavBar />
           <VisibleCarList></VisibleCarList>           //WORKS FINE
        </Box>
  );
}
export default App;

Answer 1

Я думаю, что утверждение import может быть неправильным.

Вы должны использовать import VisibleCarList from '...'; вместо import { VisibleCarList } from '...';.