Redux报错TypeError: Cannot read property 'users' of undefined排查求助

我帮你梳理下这个错误的核心原因，以及对应的修复方法：

1. Reducer组合时的键名冲突（最直接触发错误的原因） #

在你的index.js reducer组合文件里，你重复使用了userState作为两个reducer的键名：

const Reducers = combineReducers({
 userState: user,
 userState: users // 后面的键会覆盖前面的，导致原user reducer丢失
})

JavaScript对象中重复的键会被后者覆盖，所以最终你的store里userState只对应users reducer的状态，但更关键的是，你在action里要访问的usersState根本不存在！正确的做法是给两个reducer设置不同的键名：

const Reducers = combineReducers({
 currentUserState: user, // 重命名避免冲突
 usersState: users // 这才是你在action中要访问的usersState
})

这样getState().usersState就能正确指向users reducer的状态了。

2. Users Reducer初始状态与更新逻辑错误 #

你的users.js reducer里，初始状态的users设为null，但在更新时却尝试用数组扩展运算符，同时还存在笔误：

const initialState = {
 users: null, // 初始为null，不是数组，展开会报错
 userLoaded: 0,
}

// ...
case USERS_DATA_STATE_CHANGE:
 return { ...state, users: [...state.users, action.users] } // action里传的是user，不是users

修复后的users.js应该是这样：

import { USERS_POSTS_STATE_CHANGE, USERS_DATA_STATE_CHANGE } from "../constants"

const initialState = {
 users: [], // 初始化为空数组，而非null
 userLoaded: 0,
}

export const users = (state = initialState, action) => {
 switch (action.type) {
 case USERS_DATA_STATE_CHANGE:
 // 先判断用户是否已存在，避免重复添加
 const userExists = state.users.some(u => u.uid === action.user.uid);
 if (!userExists) {
   return { ...state, users: [...state.users, action.user] };
 }
 return state; // 已存在则直接返回原状态
 case USERS_POSTS_STATE_CHANGE:
 return { 
   ...state, 
   userLoaded: state.userLoaded + 1, 
   users: state.users.map(user => 
     user.uid === action.uid ? {...user, posts: action.posts} : user
   ) 
 }
 default:
 return state
 }
}

3. FetchUsersData中的未定义变量问题 #

在fetchUsersData函数里，你用到了if(getPosts)，但getPosts变量从未定义，这会引发新的错误，建议给它添加默认参数：

export function fetchUsersData(uid, getPosts = false) { // 添加默认值避免报错
 return ((dispatch, getState) => {
 const found = getState().usersState.users.some(el => el.uid === uid);
 if (!found) {
 firebase.firestore()
 .collection("users")
 .doc(uid)
 .get()
 .then((snapshot) => {
 if (snapshot.exists) {
 let user = snapshot.data();
 user.uid = snapshot.id;
 dispatch({ type: USERS_DATA_STATE_CHANGE, user });
 } else {
 console.log('does not exist')
 }
 })
 if(getPosts){
 dispatch(fetchUsersFollowingPosts(uid));
 }
 }
 })
}

4. User Reducer中的拼写错误 #

在user.js的初始状态里，你写的是follwing: []（少了一个o），和action处理里的following键名不匹配，修正后：

const initialState = {
 currentUser: null,
 posts: [],
 following: [], // 修正拼写错误
}

总结修复步骤 #

1. 修改Reducer组合中的键名，解决冲突问题
2. 修正Users Reducer的初始状态、更新逻辑和笔误
3. 处理fetchUsersData中未定义的getPosts变量
4. 修复User Reducer中的拼写错误

完成这些修复后，getState().usersState.users就能正确访问到数组，不会再出现undefined的错误了。

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