如何使用钩子在 redux 中重新渲染组件

Question

我试图概念化 redux 及其工作，经过一些测试，我注意到了一件事。 我想引用这个例子

可以说，我有一个减速器（一个 boolean 变量）。 基于该变量，会发生以下代码。

减速器

const initState = { isLoggedIn: false };
const isLoggedInReducer = (state = initState, action) => {
  switch (action.type) {
    case "LOG_IN":
      return { ...state,isLoggedIn: true };
    case "LOG_OUT":
      return { ...state,isLoggedIn: false };
    default:
      return state;
  }
};

export default isLoggedInReducer;

行动

export const logIn = () => {
    return {
        type:'LOG_IN'
    }
}

export const logOut = () => {
    return {
        type:'LOG_OUT'
    }
}

index.js

<Provider store={createStore(isLoggedInReducer)}>
      <Router>
        <Switch>
          <Route path="/" exact>
            <AppScreen />
          </Route>
          <Route path="/auth">
            <AuthScreen />
          </Route>
          <Route path="*">
            <NotFoundScreen />
          </Route>
        </Switch>
      </Router>
    </Provider>

所以，我的应用程序首先将用户引导到一个名为“mainScreen”的组件，如下所示

const AppScreen = () => {
  let isLoggedIn = useSelector((state) => state.isLoggedIn);
  if (isLoggedIn)
    return (
      <>
          <button onClick={() => dispatch(logOut())}>unauthenticate</button>
          <NavBar />
          <Content />
          <BottomBar />
      </>
    );
  else{
    return (
      <>
        <Redirect to="/auth" push />
      </>
    );
  }
};

因此，如果减速器 state 的值为 TRUE，则会显示我的导航栏和内容，否则用户将被重定向到“authScreen”，即

const AuthScreen = () => {
  let isLoggedIn = useSelector((state) => state.isLoggedIn);
  const dispatch = useDispatch();
  return isLoggedIn ? (
    <>
        <Redirect to="/" push />
    </>
  ) : (
    <>
      <h1> auth is {isLoggedIn?"true":"false"}</h1>
      <button onClick={() => dispatch(logIn())}>authenticate</button>
    </>
  );
};

这将创建一个设置，其中“authScreen”可以将减速器切换为 TRUE 并重新渲染，并发现减速器为 TRUE，因此它呈现“mainScreen”。 “MainScreen”反之亦然

现在，哪些组件实际重新渲染？ 如果我将身份验证按钮放在“导航栏”中而不是作为“导航栏”的兄弟，它会重新呈现“导航栏”还是“主屏幕”？

当 state 发生变化时，redux 如何计算要重新渲染的组件？ 当我什至没有使用“连接”时，useSelector 是如何适应的。

将钩子与 redux 一起使用会让人非常困惑。 如果我的解释难以理解，我很抱歉。 该代码实际上有效，我只是不知道如何。 感谢您提供任何信息！

Answer 1

使用带有 UI 的 Redux 始终遵循相同的基本步骤：

• 使用初始 state 渲染组件
• 调度操作时调用store.subscribe()得到通知
• 调用store.getState()读取最新数据
• 比较此组件所需的旧值和新值，以查看是否有任何实际变化。 如果没有，组件不需要做任何事情
• 使用最新数据更新 UI

React-Redux 在内部为您工作。

因此， useSelector根据您在选择器函数中返回的任何数据来决定组件是否应该重新渲染：

https://redux.js.org/tutorials/fundamentals/part-5-ui-react#reading-state-from-the-store-with-useselector

如果在调度操作后选择器返回值发生更改，则useSelector强制该组件重新呈现。 从那里开始， 正常的 React 渲染行为开始，默认情况下所有子组件都重新渲染。

请阅读我的帖子The History and Implementation of React-Redux并深入探讨 React-Redux以了解 React-Redux 如何实际实现此行为的详细信息。