使用 Redux Toolkit，如何从非 React 文件访问存储？

Question

我想做什么？

使用 Redux Toolkit，我尝试从名为 的非 React 文件访问值的“存储”，特别是我为其创建“切片”的“用户名” SomeFile.js。

目前尝试执行此操作的代码是什么？

// userMetadataSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  username: "",
};

const userMetadataSlice = createSlice({
  name: "userMetadata",
  initialState,
  reducers: {
    updateUsername: (state, action) => {
      const username = action.payload;
      state.username = username;
    },
  },
});

export const { updateUsername } = userMetadataSlice.actions;

export default userMetadataSlice.reducer;

export const selectUsername = (state) => {
  return state.userMetadata.username;
}

// SomeFile.js

import { selectUsername } from "../redux/userMetadataSlice";
import { useSelector } from "react-redux";

export const displayUsername = () => {
  const username = useSelector(selectUsername);
  console.log("Username:", username); // Error.
}

我期望结果是什么？

能够从“商店”中提取用户名。

实际结果如何？

当我尝试通过非反应文件中的“useSelector”访问该值时，会发生错误：React Hook "useSelector" is called in function "selectUsername" which is neither a React function component or a custom React Hook function

我认为问题可能是什么？

SomeFile.js其中没有任何与 React 相关的内容，因为它只是从存储中提取数据并输出数据。

我尝试过的有效解决方案是这样做：

// userMetadataSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  username: "",
};

const userMetadataSlice = createSlice({
  name: "userMetadata",
  initialState,
  reducers: {
    updateUsername: (state, action) => {
      const username = action.payload;
      state.username = username;
    },
  },
});

export const { updateUsername } = userMetadataSlice.actions;

export default userMetadataSlice.reducer;

export const selectUsername = (state) => {
  return state.userMetadata.username;
}

// New code here!

export function SelectUsername() {
  const username = useSelector(selectUsername);
  return username;
}

// SomeFile.js

import { SelectUsername } from "../redux/userMetadataSlice";

export const displayUsername = () => {
  console.log("Username:", SelectUsername); // No errors, shows correct output.
}

我正在寻找的解决方案是这样的：

1. 我提出的解决方案是从非 React 文件中的“商店”接收信息的“正确”方式吗？
2. 有没有针对此的自定义挂钩解决方案？

Answer 1

\n

我提出的解决方案是从非 React 文件中的\n“存储”接收信息的“正确”方式吗？

\n

\n

不，它滥用了 Hooks 规则和 React 函数。您直接调用SelectUsernameReact 函数。

\n

\n

有没有针对此的自定义挂钩解决方案？

\n

\n

不，React hooks 仅适用于 React 函数和自定义 React hooks。

\n

您可以从 Reduxstore对象访问您的状态。

\n

店铺

\n

从您创建的store对象中，您将有一个getState可以调用的方法。

\n

\n

getState()\xe2\x80\x8b

\n

返回应用程序的当前状态树。它等于存储的减速器返回的最后一个值。

\n

返回\xe2\x80\x8b

\n

（任意）：应用程序的当前状态树。

\n

\n

您可以导出创建的商店对象以导入到非 React JS 文件中，并且它们可以调用该getStore方法。

\n

import store from \'../path/to/store\';\n\n...\n\nconst state = store.getState();\n

\n

useSelectorReact 钩子在react-reduxReact 组件之外无法工作，但selectUsername状态选择器函数可以。

\n

// SomeFile.js\nimport store from \'../path/to/store\';\nimport { selectUsername } from "../redux/userMetadataSlice";\n\n...\n\nexport const displayUsername = () => {\n  const state = store.getState();\n\n  const username = selectUsername(state);\n\n  console.log("Username:", username);\n\n  return username;\n};\n

\n

请参阅其他存储方法以订阅状态更改并从 React 外部将操作分派到您的存储。

\n