CODEWITHSUNDEEP
reactjsredux
swirlm
swirlm

Reputation: 37

MapStateToProps not working inside component but Redux Devtools shows data

Cart inside the Cart Component is showing undefined, I tried with class and it says the same, none of my reducers are working with connect, Redux DevTools shows them all with no problem, component dev tool shows no props.

When using useSelector I get the state with no problem, but I have to use Connect for this.

this is my reducers file:

import { cartReducer } from "./cartReducer";
import { productsReducer } from "./stockReducer";
import { combineReducers } from "redux";

export const rootReducer = combineReducers({
  cart : cartReducer,
  products : productsReducer,
});

this is my store file:

import { createStore } from "redux";
import {rootReducer} from "../reducers/index";



const store = createStore(
  rootReducer,  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );

export default store;

this is my component file:

import React from "react";
import { connect } from "react-redux";

const mapStateToProps = (state) => {
  return {
    cart: state.cart,
  };
};

export function Cart({ cart }) {
  console.log(cart);

  return (
    <div className="cart-detail">
      <p>Cart</p>
    </div>
  );
}

export default connect(mapStateToProps, null)(Cart);

this is my Redux DevTools:

Redux Devtools

This is my App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { FrontStore } from "./components/FrontStore";
import { Cart } from "./components/Cart";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul></ul>
        </nav>

        <Switch>
          <Route path="/">
            <FrontStore />
            <Cart />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

This is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from "react-redux";
import store from "./store/index";


ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')

)

Upvotes: 0

Views: 320

Answers (1)

umair
umair

Reputation: 534

Here you are importing non-default export which is not connected with the redux store. fix the import of the Cart component as below.

import Cart from "./components/Cart";

OR

Remove the export in Cart Function and remove the default in the connect

   import React from "react";
    import { connect } from "react-redux";
    
    const mapStateToProps = (state) => {
      return {
        cart: state.cart,
      };
    };
    
   function Cart({ cart }) {
      console.log(cart);
    
      return (
        <div className="cart-detail">
          <p>Cart</p>
        </div>
      );
    }
    
    export  connect(mapStateToProps, null)(Cart);

Upvotes: 1

Related Questions