useSelector()钩子有什么问题

Question

我的代码有问题。我试着制作一个todo应用程序，并尝试制作一个功能来过滤已完成和未完成的任务。我使用useSelector((钩子。现在的问题是，当我执行完成的功能时，它运行良好，但当我返回执行所有功能时，redux存储中的所有任务都会被清除。原因是什么？我该如何解决这个问题？

Redux代码

import { createSlice } from "@reduxjs/toolkit";
import _ from "lodash";
let id = 1;
const initialState = {
messions: [],
filter: null,
};
const slice = createSlice({
name: "messions",
initialState,
reducers: {
addMession: (state, action) => {
state.messions.push({
description: action.payload.description,
id: id++,
finished: false,
});
state.messions.reverse();
},
removeMession: (state, action) => {
_.remove(state.messions, (n) => n.id === action.payload.id);
},
checkMession: (state, action) => {
let index = state.messions.findIndex(
(mession) => mession.id === action.payload.id
);
state.messions[index].finished = !state.messions[index].finished;
},
completedMessions: (state, action) => {
state.filter = action.payload.key;
},
allMessions: (state, action) => {
return state.messions;
},
clearMessions: (state, action) => {
state.messions.length = 0;
},
},
});
export const {
addMession,
removeMession,
checkMession,
completedMessions,
// notCompletedMessions,
allMessions,
clearMessions,
} = slice.actions;
export default slice.reducer;

我的应用程序组件代码

function App({
removeMession,
checkMession,
messions,
addMession,
completedMessions,
allMessions,
}) {
const localMessions = useSelector((state) => {
const filteredKey = state.filter;
const all = state.messions;
const completedMessions = all.filter((mession) => mession.finished);
const notCompletedMessions = all.filter((mession) => !mession.finished);
if (filteredKey === true) {
return completedMessions;
}
if (filteredKey === false) {
return notCompletedMessions;
}
return all;
});
console.log(localMessions);
return (
<AppContext.Provider value={{ handleDeleteMession, handleCheckMession }}>
<Layout title={"To Do List"}>
<Container>
<Row className="justify-content-center ">
<Col sm={3}>
<SideBar
handleCompletedMessions={handleCompletedMessions}
allMessions={allMessions}
/>
</Col>
<Col sm={6}>
<Input handleAddMession={handleAddMession} />
<Messions localMessions={localMessions} />
</Col>
</Row>
</Container>
</Layout>
</AppContext.Provider>
);
function handleAddMession(m) {
addMession({ description: m });
}
function handleCompletedMessions() {
completedMessions({ key: true });
}
function handleDeleteMession(id) {
removeMession({ id: id });
console.log(id);
}
function handleCheckMession(id) {
checkMession({ id: id });
console.log(id);
}
}
const mapStateToProps = (state) => {
return {
messions: state.messions,
};
};
const mapDispatchToProps = (dispatch) => {
return {
removeMession: (action) => dispatch(removeMession(action)),
checkMession: (action) => dispatch(checkMession(action)),
addMession: (action) => dispatch(addMession(action)),
completedMessions: (action) => dispatch(completedMessions(action)),
allMessions: () => dispatch(allMessions()),
};
};

Answer 1

您似乎有点混淆了操作和选择器。您的allMissions减速器没有任何意义。调用它实际上会扰乱你的状态并破坏你的应用程序，但我并不清楚它应该做什么。我认为它是为了删除过滤器？在哪种情况下你想要：

allMessions: () => {
state.filter = null;
},

这将删除state.filter属性的true/false值，并允许您当前的选择器函数工作。