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 看不到 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

Store 的多个实例

您在 store 文件中创建一个 index.js 变量并将该存储传递给 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 更新

2 个答案:

Store 的多个实例