如何在useEffect中访问redux store的当前状态

aamkag61 于 2023-03-23 发布在其他

关注(0)|答案(1)|浏览(152)

const loginSlice = createSlice({
  name: 'login',
  initialState: null,
  reducers: {
    setUser(state, action) {
      return action.payload
    },
    setLoggedUser(state, action) {
      window.localStorage.setItem(
        'loggedBlogappUser',
        JSON.stringify(action.payload)
      )
    },
    getLoggedUser() {
      const loggedUserJSON = window.localStorage.getItem('loggedBlogappUser')
      if (loggedUserJSON) {
        return JSON.parse(loggedUserJSON)
      }
    },
  },
})

这是我的loginReducer。我正在调度getLoggedUser（），以便当登录的用户返回该页面时，它保持登录状态。但我想分配令牌来创建或更新详细信息。

useEffect(() => {
    dispatch(getLoggedUser())
    blogService.setToken(user.token)
  }, [])

这是我的useEffect。调度后我如何才能访问loggedBlogappUser内的详细信息
我确实试过几次从商店访问用户详细信息。

redux

来源：https://stackoverflow.com/questions/75777189/how-to-access-current-state-of-redux-store-in-useeffect

1条答案

按热度按时间

gijlo24d1#

这里是你可以做的第一件事，你需要使用react-redux库提供的useselector钩子。这个钩子允许你访问商店的当前状态，并在状态改变时更新组件。
你需要像这样导入钩子

import { useSelector } from 'react-redux';

并使用useSelector钩子从Redux存储访问用户对象

const user = useSelector((state) => state.login);

现在在useEffect中使用user对象

useEffect(() => {
  dispatch(getLoggedUser());
}, []);

useEffect(() => {
  if (user) {
    blogService.setToken(user.token);
  }
}, [user]);

下面是它的完整示例

import { useSelector, useDispatch } from 'react-redux';
import { getLoggedUser } from 'path to your getLoggedUser function';

const YourComponent = () => {
  const user = useSelector((state) => state.login);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getLoggedUser());
  }, []);

  useEffect(() => {
    if (user) {
      blogService.setToken(user.token);
    }
  }, [user]);

  // Your component's JSX
};

现在，第一个useEffect钩子在组件挂载时调度getLoggedUser操作，然后第二个useEffect钩子在用户对象更改时在blogService上设置令牌，但是我们可以在一个useEffect中处理它的所有内容，但我只是想解释它是如何触发的，让我知道它是如何进行的！

赞(0）回复(0）举报 2023-03-23

我来回答

如何在useEffect中访问redux store的当前状态

1条答案

相关问题

热门标签

最新问答