如何在反应查询中存储本地状态？

Posted 2023-02-19

【中文标题】如何在反应查询中存储本地状态？

【英文标题】：How to store local states in react-query?

【发布时间】：2022-01-19 17:14:25

【问题描述】：

如何在 react-query 中存储本地状态？

例如，我有一个模态窗口，我想将其可见性存储在一个单独的钩子中，但是为了可以在我的应用程序的任何位置获取此状态，我尝试这样：

export const useSidebar = () => 
  const [isOpen, cycleOpen] = React.useState(false);

  const visible = () => 
    useQuery('sideBarVisible', () => cycleOpen(true));
  ;

  return 
    isOpen,
    visible,
  ;
;

但我得到了错误，换句话说，如何像在 redux 中一样全局存储可见性状态？

【问题讨论】：

我不确定你想做什么，但是要像redux一样全局存储数据，你可以使用React上下文reactjs.org/docs/context.html这样可以解决你的问题吗？

是的，但我只是想避开上下文。

@trickysneak 有什么特殊原因要避免使用上下文，上下文是专门为具有类似“全局”的值而创建的？

【参考方案1】：

您应该使用 React 上下文，它与 useState 结合可以创建一个可由上下文的所有子级访问的值，其中所有使用它的组件将在更新其值时重新呈现。

const SidebarContext = React.createContext(false);

const SidebarProvider = ( children, initialValue = false ) => 
  const [isOpen, setIsOpen] = React.useState(initialValue);

  return (
    <SidebarContext.Provider value=[isOpen, setIsOpen]>
      children
    </SidebarContext.Provider>
  );
;

// this is not required, it is just the same as using React.useContext, 
// it just changes the two imports for useContext + SidebarContext,
// with a single useSidebar import.
// i left it here because you might want to do more stuff in here
const useSidebar = () => 
  const contextValue = React.useContext(SidebarContext);
  return contextValue;
;

// this is to showcase the shared value
const UsingSidebar1 = () => 
  const [isOpen] = useSidebar();

  return (
    <div className="bordered">
      <h5>UsingSidebar1 component</h5>
      Sidebar is: isOpen.toString()
    </div>
  );
;

// this is to showcase the shared value and how the change 
// updates all relevant components
const UsingSidebar2 = () => 
  const [isOpen, setOpen] = useSidebar();

  return (
    <div className="bordered">
      <h5>UsingSidebar2 component</h5>
      Sidebar is: isOpen.toString()
      <br />
      <button onClick=() => setOpen(!isOpen)>toggle</button>
    </div>
  );
;

const App = () => (
  <SidebarProvider initialValue=false>
    <UsingSidebar1 />
    <UsingSidebar2 />
  </SidebarProvider>
);

ReactDOM.render(<App />, document.body)

.bordered 
  margin: 0.5em;
  padding: 0.5em;
  border: 1px solid tomato;
  border-radius: 2px;


h5 margin:0 0 0.5em 0

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>