如何将 Redux 参数传递给组件？

Question

我正在用 React y React-Redux 做一个项目

我正在使用 api，创建一个搜索组件以从该 api 获取数据，但我不知道如何将 redux 的单词（从搜索的内容）传递给组件。 如果我要寻找“意大利面”这个词，我不知道我应该如何传递它。 我正在学习如何使用 Redux

----- REDUX ----

const INITIAL_STATE = {
    search: '',
};

const reducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case SEARCH: return {
            ...state, 
            recipes: action.payload,
        };
        default:
            return {...state}
    }
};

export function getByName(query) {
    return function (dispatch) {
        return axios.get("https://www.themealdb.com/api/json/v1/1/search.php?s="+query).then((response) => {
            dispatch({
                type: SEARCH,
                payload: response.data.meals
            })
        }).catch((error) => console.log(error));
    }
}

---- COMPONENTE SEARCH ---

const [search, setSearch ] = useState('')
    const query = useSelector((state) => state.recipeReducer.search);
    const dispatch = useDispatch();

    
    useEffect(() => {
        dispatch(getByName(query))
    }, [dispatch]) 


    const handleFilter = e => {
        e.preventDefault();
        setSearch(e.target.value)
        dispatch(getByName(search))
    }


  return (
    <div>
        <form>
            <label>
                Search:
                <input type="text" id="title" placeholder='Search recipe...' value={search} onChange={(e) => handleFilter(e)} />
            </label>
        </form>
    </div>
  )
} 

Answer 1

我注意到的一件事是，您最初的 state 中的“搜索”是多余的。 结果是你关心这个玩具问题的事情。 你应该有：

const INITIAL_STATE = {
    recipes: [],
}

然后问题是您的搜索组件的构建。 这是定义您的查询的组件，而不是阅读它。这样的东西更像你想要的：

const SearchComponent = ({}) => {
  const [search, setSearch] = useState('')
  const recipes = useSelector((state) => state.recipeReducer.recipes);
  const dispatch = useDispatch();

  const handleFilter = e => {
      e.preventDefault();
      setSearch(e.target.value)
      getByName(search)(dispatch) // getByName returns a function. 
                                  // That function takes dispatch as an argument.
  }

  return (
    <div>
        <form>
            <label>
                Search:
                <input type="text" id="title" placeholder='Search recipe...' value={search} onChange={(e) => handleFilter(e)} />
            </label>
        </form>
    </div>
  );
}