使用 Redux 工具包，我如何從非反應文件訪問商店？

Question

我想做什么？

使用 Redux Toolkit，我試圖從一個名為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;
}

// SomeFile.js

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

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

我期望結果是什么？

為了能夠從“商店”中提取用戶名。

實際結果是什么？

當我嘗試通過非反反應文件中的“使用者”訪問該值時，發生錯誤： 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";
import { useSelector } from "react-redux";

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

我正在尋找的解決方案是這樣的：

1. 我提出的解決方案是從非 React 文件中的“存儲”接收信息的“正確”方式嗎？
2. 是否有針對此的自定義鈎子解決方案？

Answer 1

店鋪

從您創建的store object 中，您將有一個getState方法可以調用。

getState()

返回應用程序的當前 state 樹。 它等於 store 的 reducer 返回的最后一個值。

退貨

（任意）：您的應用程序的當前 state 樹。

您可以導出您創建的商店 object 以導入非 React JS 文件，它們可以調用getStore方法。

import store from '../path/to/store';

...

const state = store.getState();