Блог

Я пытаюсь создать компонент панели поиска, который позже вызовет api и сохранит результаты в redux. однако у меня возникли проблемы с правильной работой метода onChange. Мой текст на экране не меняется, но я вижу в консоли, что он продолжает выводить начальное состояние плюс последнюю букву, которую я ввел. Я сделал несколько журналов консоли, но, похоже, я вообще не могу запустить свой searchReducer.

 // 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;
 

Вам нужно его уничтожить

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

Аналогично mapStateToProps mapDispatchToProps тому, что будет доступно подключенному компоненту в качестве Props

Вам нужно будет получить UpdateQuery и UpdateResults из реквизита, а не напрямую использовать их, чтобы это работало так :-

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

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