如何将Redux中的搜索参数传递给React组件？

问题分析 #

你的代码存在几个核心问题，导致Redux中的搜索关键词无法正确同步和传递到组件：

• Redux reducer处理SEARCH action时，未更新search字段，Redux状态里的搜索关键词始终停留在初始值''
• Search组件同时使用本地useState和Redux状态，造成状态冗余且不同步
• handleFilter中调用dispatch(getByName(search))时，search是更新前的旧值（setSearch是异步操作）
• useEffect的依赖数组缺少query，无法在Redux搜索关键词变化时触发搜索

修复步骤及代码修改 #

1. 完善Redux逻辑，同步搜索关键词到状态 #

先补充action类型和处理逻辑，确保搜索关键词能被正确存入Redux状态：

// 新增action类型常量
const SET_SEARCH_QUERY = 'SET_SEARCH_QUERY';
const SEARCH = 'SEARCH';

const INITIAL_STATE = {
    search: '',
    recipes: [] // 初始化recipes字段，避免后续出现undefined
};

const reducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case SET_SEARCH_QUERY:
            return {
                ...state,
                search: action.payload // 更新Redux中的搜索关键词
            };
        case SEARCH:
            return {
                ...state,
                recipes: action.payload || [] // 处理无结果场景，避免API返回null
            };
        default:
            return {...state}
    }
};

// 新增同步搜索关键词的action creator
export function setSearchQuery(query) {
    return {
        type: SET_SEARCH_QUERY,
        payload: query
    };
}

export function getByName(query) {
    return function (dispatch) {
        // 先把搜索关键词同步到Redux
        dispatch(setSearchQuery(query));
        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));
    }
}

2. 修改Search组件，用Redux状态替代本地useState #

移除本地状态，直接从Redux获取搜索关键词，调整触发逻辑：

const Search = () => {
    const searchQuery = useSelector((state) => state.recipeReducer.search);
    const dispatch = useDispatch();

    // 当Redux中的搜索关键词变化时，自动触发搜索
    useEffect(() => {
        if (searchQuery.trim()) { // 避免空字符串触发无效请求
            dispatch(getByName(searchQuery));
        }
    }, [dispatch, searchQuery])

    const handleInputChange = (e) => {
        const query = e.target.value;
        // 同步输入值到Redux，useEffect会自动触发搜索
        dispatch(setSearchQuery(query));
    }

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

关键修改说明 #

• 状态单一来源：移除本地useState，完全依赖Redux的search字段存储搜索关键词，避免状态不一致
• 自动触发搜索：通过useEffect监听Redux中searchQuery的变化，自动发起API请求
• 同步关键词到Redux：输入框值变化时，先通过setSearchQuery同步到Redux，确保组件和Redux状态始终统一
• 边界情况处理：避免空字符串触发无效API请求，同时处理API返回null的场景，保证recipes始终为数组

内容的提问来源于stack exchange，提问作者Daiana Gimenez