![](/img/trans.png)
[英]How to use single action type in different reducer function with createSlice method in redux-toolkit
[英]Redux-toolkit: state is a proxy inside a createSlice reducer
我正在嘗試在切片縮減器內部的狀態數組中附加/更新一些數據,但是當我嘗試console.log
我感興趣的狀態的.projects
數組時,我只得到了一個 javascript 代理。 這里發生了什么(我做錯了什么)?
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
projects: [],
};
const projectsSlice = createSlice({
name: 'projectsSlice',
initialState: { ...initialState },
reducers: {
addProject(state, action) {
const { project } = action.payload;
const newProjects = [project, ...state.projects];
console.group('add project');
console.log('project: ', project);
console.log('state projects: ', state.projects);
console.log('newProjects: ', newProjects);
console.groupEnd();
state.projects = newProjects;
},
setProjects(state, action) {
const { projects } = action.payload;
state.projects = projects;
},
removeProject(state, action) {
const { projectId } = action.payload;
const newProjects = [...state.projects].filter((project) => project.id !== projectId);
state.projects = newProjects;
},
updateProject(state, action) {
const { project } = action.payload;
const projectIndex = state.projects.findIndex((stateProject) => stateProject.id === project.id);
const newProjects = [...state.projects].splice(projectIndex, 1, project);
console.group('updateProject');
console.log('project: ', project);
console.log('projectIndex: ', projectIndex);
console.log('state projects: ', state.projects);
console.log('newProjects: ', newProjects);
console.groupEnd();
state.projects = newProjects;
},
},
});
export const { addProject, removeProject, updateProject, setProjects } = projectsSlice.actions;
export default projectsSlice.reducer;
代理是您可以改變該減速器中的狀態並在您的狀態中獲得不可變副本的原因 - 但瀏覽器在記錄代理方面非常糟糕。
根據文檔,您可以使用 RTK&immer 的current
導出:
const slice = createSlice({
name: 'todos',
initialState: [{ id: 1, title: 'Example todo' }],
reducers: {
addTodo: (state, action) => {
console.log('before', current(state))
state.push(action.payload)
console.log('after', current(state))
},
},
})
您需要使用當前
import { current } from '@reduxjs/toolkit'
這樣,您就可以達到當前狀態並使用它們,之后,您可以在 reducer 中發送 return 以返回新數據。
將看起來像這樣:
const referralSlicer = createSlice({
name: 'referral',
initialState: {
referrals: [],
currentCard: 0,
} as IReferralSlicer,
reducers: {
addReferrals(state, { payload }) {
return {
referrals: [...state.referrals, payload],
}
},
deleteReferral(state, { payload }) {
const currentState = current(state)
return {
...currentState,
referrals: currentState.referrals.splice(payload, 1),
}
},
setCurrentCard(state, { payload }) {
return {
referrals: state.referrals,
currentCard: payload,
}
},
},
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.