如何在 redux 状态更新时自动刷新组件

Question

我目前将用户名存储在 redux store 中，并在用户登录后在顶部栏中显示。（如屏幕截图所示）。但是，当 redux 状态更新时，它不会自动重新渲染。我仍然需要在顶部栏中执行一些操作，然后用户名才会出现。否则，它不会出现。所以问题是，如何强制从我的登录组件重新呈现顶部栏组件。另一个问题：刷新页面时用户名会消失。那么是否有任何选项可以使用 redux 状态来持久化数据？或者不可能。

const Login = () => {
  ...
  const handleLogin = async googleData => {
    ...
    //store user name value als application state into redux store
    store.dispatch(nameActionCreator(googleData.profileObj.name));
    ...
  }
}

const TopBar = () => {
  ...
  return(
    ...
    <h5>store.getState().userNameRecuder.name</h5>
    ...
  )
}

登录前

登录后

Answer 1

第一题

简答：

您必须使用 useSelector 钩子调用选择器函数。您直接在 <h5> 元素中调用它。所以它不起作用。

const TopBar = () => {
  const username = useSelector(() => store.getState().userNameRecuder.name)

  return(
    <h5>{username}</h5>
  )
}

包含最佳实践的长答案：

您需要创建一个 selector 并在您的组件中使用它以在状态更改后重新呈现您的组件。

在selector.js

const selectUsername = (state) => state.userNameRecuder.name

export selectUsername;

现在，在您的 Topbar 组件中，您需要实现 useSelector 挂钩：

import {useSelector} from 'react-redux';
import {selectUsername} from 'store/selectors';

function TopBar () {
  
  const username = useSelector(selectUsername)

  return (
    <p>username</p>
  )
}

使用适当的操作更新状态（更新用户名）将导致在 Topbar 组件中重新呈现以从商店获取新用户名。

第二题

有很多持久化数据的好方法，例如将它们存储在 cookies、localStorage 或使用第三方库，如 redux-persist，等等... 看看 .

Answer 2

它基于@novonimo 的回答工作。即使没有分开selector.js。只需使用 useSelector 钩子将 redux 状态与组件状态连接起来，因此当 redux 状态更改时组件将自动重新渲染。

const TopBar = () => {
      const userName = useSelector(() => store.getState().userNameRecuder.name);
      
      return(
        ...
        <h5>userName</h5>
        ...
      )
    }

如何在 redux 状态更新时自动刷新组件

how to auto refresh component when redux state get updated

rerender

reactjs

redux

第一题

简答：

包含最佳实践的长答案：

第二题