useSelector 未使用 Redux Toolkit 进行更新

Question

我一整天都在与这个问题作斗争，非常感谢任何帮助。

我有一个使用 Redux Toolkit 和 createSlice 构建的 redux 商店，如下所示：

const initialState = {
  analiticaNumber: "",
  animal: {},
  tests: [{ key: "G9116", value: "DERMATOFITOS PCR/ MUESTRA" }],
};

const PeticionSlice = createSlice({
  name: "peticion",
  initialState,
  reducers: {
    addTest: (state, action) => {
      state.tests.push(action.payload);
    },
  },
});

export const { addTest: addTestActionCreator } = PeticionSlice.actions;

export const testsArray = (state) => state.Peticion.tests;

export default PeticionSlice.reducer;

我还有一个根减速器，它导入其余的切片并如此命名它们

import { combineReducers } from "redux";
import NavigationSlice from "./NavigationSlice";

const RootReducer = combineReducers({
  Peticion: PeticionSlice,
});

export default RootReducer;

当我将测试添加到测试数组时，它工作正常并显示在 redux devtools 中。

问题来了，react 看不到存储中的更改，并且不会更新子组件：

import { testsArray } from "./Store/PeticionSlice"; 这就是我导入测试数组以使用 useSelector 进行调用的方式。传统的方式const { tests } = useSelector( (state) => state.Peticion)也行不通。

function App() {
  const tests = useSelector(testsArray);

  useEffect(() => {
    console.log("tests");
  }, [tests]);

  return (
    <StylesProvider injectFirst>
      <div className="App">
        <nav>
          <Navbar />
        </nav>
        {tests.map((test) => (
          <p>{test.key}</p>
        ))}
      </div>
    </StylesProvider>
  );
}

我相信它必须与状态的可变性有关，但我认为工具包已经解决了这个问题，而且我一生都不知道如何解决这个问题。

有什么帮助吗？？？多谢。

** 更新 **

我相信这与我执行操作的方式有关。因为我需要为应用程序的功能添加多个边界，所以我决定使用一个外部函数来相应地进行过滤和分派。它不是反应组件。

import { configureStore } from "@reduxjs/toolkit";
import { addTestToList, addTestActionCreator } from "../Store/PeticionSlice";
import RootReducer from "../Store/RootReuder";

const PruebasToSubmitArray = [];

const store = configureStore({
  reducer: RootReducer,
});

const handleTestList = (test, action) => {
  const anatomia = "A";
  const microbiologia = "M";

  function oneBiopsia() {
    while (test.key.toString().charAt(0) === anatomia) {
      return PruebasToSubmitArray.some(
        (pruebaInArray) => pruebaInArray.key.toString().charAt(0) === anatomia
      );
    }
    return false;
  }

  if (!oneBiopsia() && action === "add") {
    switch (test.key.toString().charAt(0)) {
      case anatomia:
        // console.log("Open pdf for anatomia");
        store.dispatch(addTestActionCreator(test));
        break;
      case microbiologia:
        // console.log("Open pdf for micro");
        store.dispatch(addTestActionCreator(test));
        break;
      default:
        // console.log("add test to the list, ", test);
        store.dispatch(addTestActionCreator(test));
        break;
    }
  } else if (action === "remove") {
    // console.log("remove test from the list, ", test);
  } else if (oneBiopsia()) {
    console.log("Only one biopsia per peticion, ", newState);
  }

  return null;
};

export default handleTestList;

我在 App 组件上添加了一个按钮，它按预期工作（我显示了更新的状态），现在 redux 更新了状态，但组件不会反映它。

尽可能完整地编写 SandBox 代码

Answer 1

Store 的多个实例

您在文件中创建一个store变量index.js并将该存储传递给react-reduxProvider组件。useSelector这是所有react-redux和useDispatchhooks 将与之交互的store 实例。

在您的HandleTestList.js文件中创建一个不同的store变量。然后，您dispatch对该商店进行操作，但这些操作不会反映在您的 React 应用程序中，因为这不是您的 React 应用程序使用的商店。

handleTestList需要 A) 导入相同的全局store变量。您需要将其移出index.js和移入store.js以避免循环依赖。或 B) 接受dispatch作为参数。