在React中将useReducer与useContext一起使用的正确方法

问题描述

我是一名新的React开发人员，在我的应用程序中实现了全局状态。我使用带有上下文API的useReducer来缓存表单搜索数据，但是我觉得我使用的reducer错误，即使它可以工作。在调用 dispatchSearchData 之前，我正在准备有效负载，而不是直接在reducer中完成它：

import React,{ createContext,useReducer,useMemo,useEffect } from "react";

const initialData = {
  from: "",to: "",date_go: "",date_back: "",passengers: "",};

const dataReducer = (searchData,newData) => {
  if (newData === null) {
    localStorage.removeItem("currentSearchData");
    return initialData;
  }
  return { ...searchData,...newData };
};

const localData = JSON.parse(localStorage.getItem("currentSearchData"));

export const SearchDataContext = createContext({});

export const SearchDataProvider = (props) => {
  const [searchData,dispatchSearchData] = useReducer(dataReducer,localData || initialData);
  const searchDataValue = useMemo(
    () => ({
      searchData,setSearchData,}),[searchData,setSearchData],);
  useEffect(() => {
    localStorage.setItem("currentSearchData",JSON.stringify(searchData));
  },[searchData]);

  return <SearchDataContext.Provider value={searchDataValue}>{props.children}</SearchDataContext.Provider>;
};

调用它的示例：

let search = (e) => {
    e.preventDefault();
    dispatchSearchData(formData);
    setServiceData(null);
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）