mapStateToProps & mapActionsToProps not firing in react component

I have a component (SearchFilter.js) and am using connect to trigger mapStateToProps and mapActionsToProps on export.

Trouble is, mapStateToProps isn’t firing — no props (neither state nor actions) show up in React DevTools and I can’t even console log from inside mapStateToProps.

I’ve tried looking at various Stack Overflow threads but they mostly seem to be typos, or the actions themselves not working.

What’s more, I’ve got an almost identical redux setup for another component (Counter.js) that woks perfectly.

I think it could have something to do with how I provide the store/route to components (see App.js below) as React.Provider shows up in React DevTools for the Counter but not SearchFilter.

Here’s the SearchFilter component:

import React, { Component } from "react";

import { connect } from "react-redux";
import { addSearchTerm } from "../redux/actions/searchActions";

import "../styles/SearchFilter.css";

export class SearchFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchTerm: "",
      showFilters: false,
    };
  }

  //various content...
}

const mapStateToProps = (state) => {
  console.log(state);
  return {
    search: state.search,
  };
};

const mapActionsToProps = {
  addSearchTerm,
};

export default connect(mapStateToProps, mapActionsToProps)(SearchFilter);

App.js

function App() {
  return (
    <Router>
      <Provider store={store}>
        <div className="App">
          <NavBar />
          <Counter />
          <Switch>
            <Route exact path="/" component={Home} /> // SearchFilter rendered in Home page
            <Route path="/account" component={Account} />
          </Switch>
        </div>
      </Provider>
    </Router>
  );
}

EDIT: Where I’ve implemented this component in the Home.js view:

export default function Home() {
  return (
    <div>
      <h4>This is the Home page</h4>
      <SearchFilter />
      <ProfilesList />
    </div>
  );
}

Answer

Try to remove the “export” when you declare the class component, maybe that helps.

change

export class SearchFilter extends Component

class SearchFilter extends Component

Advertisement

Answer