添加反应路由后无法访问redux存储。 未调用 MapStateToProps

Question

I'm learning redux. Wrote some simple components for fetching data from API. Everything worked fine until I added routing.

I'm wrapping my Router with Provider. I have route '/cars' and component VisibleCarList which accesses store using connect. When accessing '/cars' via Link or direct URL(tried both, same result) mapStateToProps is not invoked at all, can't see any redux props.

However if I go to for example '/example' with routed App component which has VisibleCarList in it everything works fine.

Spent a few hours already and I still don't understand why it can't connect to the store. Any ideas?

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)

App.js

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

Answer 1

I think the import statement may be wrong.

You have to use import VisibleCarList from '...'; rather than import { VisibleCarList } from '...'; .