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";这就是我导入testsArray以使用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;

我在应用程序组件上添加了一个按钮，它按预期工作(我显示了更新的状态(，现在是redux更新状态，但组件不会反映它。

编码SandBox尽可能完整

Answer 1

在我的情况下，这是非常奇怪的行为。

我做了

state = action.payload

但这并没有奏效。

一旦我切换到

state.viewer = action.payload.viewer

一切都成功了！

Answer 2

存储的多个实例

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

在HandleTestList.js文件中，您可以创建一个不同的store变量。然后，您将D_10操作dispatch添加到该存储中，但这些操作不会反映在您的React应用程序中，因为这不是您的React应用程序使用的存储。

handleTestList需要A(导入相同的全局store变量。您将希望将其从index.js移到store.js中，以避免循环依赖关系。或者B(接受CCD_ 15作为自变量。