DISpatch 在 React Redux 中未觸發

Question

我正在嘗試構建一個搜索欄組件，該組件稍后將進行 api 調用並將結果存儲在 redux 中。 但是我無法讓 onChange 方法正常工作。 我的屏幕上的文字沒有改變，但我可以在控制台中看到它不斷打印出最初的 state 以及我輸入的最后一個字母。 我做了一些控制台日志，但似乎根本無法讓我的 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;

Answer 1

你需要解構它

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

與mapDispatchToProps mapStateToProps作為Props提供給連接的組件

Answer 2

您需要從道具中獲取UpdateQuery和UpdateResults而不是直接使用它們才能像這樣工作：-

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

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