useReducer 显示 React 中不同组件的初始状态

Question

我正在尝试在整个应用程序中将

loginFlag

设置为状态。我正在使用

useReducer

钩子来执行该操作。看起来状态仅限于我发送操作的页面

A

。当我转到页面

B

时，我看到的是初始状态。

摘自我的代码

组件

A

const Home = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  console.log("state in home", state);
  return (
    <div>
      <button onClick={() => dispatch({ type: "count" })}>Count</button>
    </div>
  );
};

组件

B

const About = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  console.log("state in about", state);
  return (
    <div>
      About page    
    </div>
  );
};

我使用 CodeSandbox 创建了一个工作示例。有人可以帮忙吗？

Answer 1

那是因为您正在创建两个不同的状态变量，它们恰好都被命名为“state”。

如果您在 App 组件中创建状态，并将其作为 prop 传递给 Home 和 About 组件，它将起作用。

请参阅此代码和框示例。它还将两个组件呈现为 / 路由的子组件（在 Router 文档中推荐），以便控制台记录两者的状态。

Answer 2

你也可以使用createcontext;)

export const ProfileContext = createContext();
<ProfileContext.Provider value={{dispatch , state}}

和路线... 在其他组件/页面中使用：

const {dispatch, state} = useContext(ProfileContext)