DIspatch not firing in React Redux

Question

I am trying to build a search bar component that will later make an api call and store the results in redux. however I am having trouble getting the onChange method working properly. My text onscreen doesn't change, but I can see in the console that it keeps printing out the initial state plus the last letter I entered. I did some console logs but I can't seem to get my searchReducer to run at all.

// Searchbar.js

const Searchbar = ({ query, results }) => {
  const onSubmit = (e) => {
    e.preventDefault();
  };

  const onChange = (e) => {
    UpdateQuery(e.target.value);
  };

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="search">Search Bar</label>
      <input
        className="search-input"
        name="search"
        type="text"
        placeholder="Search Meals..."
        value={query}
        onChange={onChange}
      />
      <input className="search-btn" type="submit" value="Search" />
    </form>
  );
};

const mapStateToProps = (state) => {
  return {
    query: state.search.query,
    results: state.search.results,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    UpdateQuery: (query) => dispatch(UpdateQuery(query)),
    UpdateResults: (results) => dispatch(UpdateResults(results)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);

// search-actions.js

import * as actionTypes from "./search-types";

export const UpdateQuery = (query) => {
  console.log("query >>> " + query);
  return {
    type: actionTypes.UPDATE_QUERY,
    payload: query,
  };
};

export const UpdateResults = (results) => {
  console.log("results >>> " + results);
  return {
    type: actionTypes.UPDATE_RESULTS,
    payload: results,
  };
};

// search-reducer.js 

import * as actionTypes from "./search-types";

const INITIAL_STATE = {
  query: "test",
  results: ['test'],
};

const searchReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case actionTypes.UPDATE_QUERY:
      return {
        ...state,
        query: action.payload,
      };

    case actionTypes.UPDATE_RESULTS:
      return {
        ...state,
        results: action.payload,
      };
    default:
      return state;
  }
};

export default searchReducer;

// rootReducer.js

const rootReducer = combineReducers({
    shop: shopReducer,
    search: searchReducer,
});

export default rootReducer;

Shyam · Accepted Answer · 2021-05-25 05:17:16Z

1

You need to destructure it

const Searchbar = ({ query, results, UpdateQuery, UpdateResults }) => {

Similar to mapStateToProps the mapDispatchToProps will be available to the connected Component as a Props

answered May 25, 2021 at 5:17

Shyam

5,5071 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

k4iru Over a year ago

thank you! Can't believe I missed something so simple.

Lakshya Thakur · Accepted Answer · 2021-05-25 05:17:41Z

1

You would need to get the UpdateQuery and UpdateResults from the props and not directly use them for this to work like so :-

const Searchbar = ({ query, results,UpdateQuery, UpdateResults  }) => {
  const onSubmit = (e) => {
    e.preventDefault();
  };

  const onChange = (e) => {
    UpdateQuery(e.target.value);
  };

answered May 25, 2021 at 5:17

Lakshya Thakur

8,3141 gold badge15 silver badges43 bronze badges

Collectives™ on Stack Overflow

DIspatch not firing in React Redux

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related