Redux Toolkit中useSelector访问slice状态报undefined错误如何解决

问题原因及修复方案 #

你遇到的报错由两处代码不匹配导致，按以下步骤修改即可：

1. 修正slice的初始状态格式错误
   你当前的initialState外层多余包裹了一层数组，但reducer中返回的是普通对象，二者类型不匹配。修改slice代码中的初始状态：

export const navPannelSlice = createSlice({
    name: "navPannel",
    // 去掉外层数组，直接用对象作为初始状态
    initialState: {
        pathnames: [document.location.pathname]
    },
    reducers: {
        changePathName: (state, action) => {
            // RTK支持直接修改state写法，也可以保留你原有的返回新对象写法
            state.pathnames = action.payload
        },
    },
});

export const { changePathName } = navPannelSlice.actions;
export default navPannelSlice.reducer;

2. 修正useSelector的状态取值路径
   你在store配置中把navPannel的reducer挂载到了navPannel字段下，取值时要先取该字段，不能直接取不存在的pathnames根字段：

const dispatch = useDispatch();
// 修正取值路径，从navPannel字段下读取属性
const pathnames =  useSelector(state => state.navPannel.pathnames[0]);

修改完成后重新启动项目即可正常运行。

内容的提问来源于stack exchange，提问作者Dean Smith