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;

我还有一个 root reducer，它导入其余的切片并以此命名它们

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

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

export default RootReducer;

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

问题来了，react 看不到 store 的变化，不会更新子组件：

import { testsArray } from "./Store/PeticionSlice"; 这就是我导入 testArray 以使用 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 更新状态一样，但组件不会反映它。

Code SandBox尽我所能

Answer 1

商店的多个实例

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

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

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

Answer 2

我的行为很奇怪。

我做到了

state = action.payload

那没用。

一旦我切换到

state.viewer = action.payload.viewer

一切正常！

useSelector 未使用 Redux Toolkit 更新

useSelector not updating with Redux Toolkit

reactjs

redux

react-redux

redux-toolkit

商店的多个实例