useSelector 未使用 Redux 工具包更新

Question

我整天都在与这个作斗争，我会很感激任何帮助。

我有一个使用 Redux 工具包和 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;

我还有一个根减速器，它导入切片的 rest 并将它们命名为

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

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

export default RootReducer;

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

问题来了，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>
  );
}

我相信它必须与 state 的可变性有关，但我认为工具包可以解决这个问题，而对于我来说，我不知道如何解决这个问题。

有什么帮助？？？ 非常感谢。

** 更新 **

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

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 更新了 state 但组件不会反映它。

尽可能完整地编写沙盒代码

Answer 1

Store的多个实例

您在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

一切正常！