无法在 Redux + Firebase 中获取用户描述

Question

虽然我已经成功获取了users并profiles但我不知道为什么会出现以下错误：

无法读取未定义的属性"内容">

{content: "Hello world", status: 2}

最初，我使用 Firestore，这次从不同的集合中获取 2 个文档，users和profiles。

冗余代码：

export function fetchUser(id) {
return dispatch => {
usersRef
.doc(id)
.get()
.then(doc => {
profilesRef
.where("uid", "==", id)
.where("status", "==", doc.data().current_status)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(snapshot) {
const profileItems = { ...doc.data(), profiles: snapshot.data() };
dispatch({
type: FETCH_USER,
payload: profileItems
});
});
});
});
};
}

在容器中：

import { FETCH_USER } from "../actions";
const initialState = {};
export default (state = initialState, action) => {
switch (action.type) {
console.log("action", action.payload)
// successfully fetched, user info and profiles: profiles info
case FETCH_USER:
return action.payload;
default:
return state;
}
};

在视图：

function mapStateToProps({ users }) {
console.log("content", user.profiles.content)
// Cannot read property 'content' of undefined
return { user: users, profiles: user.profiles };
}

减速器文件：

import { createStore, applyMiddleware, combineReducers } from "redux";
import UsersReducer from "./reducer_users.js";
const rootReducer = combineReducers({
users: UsersReducer,
});
const store = createStore(rootReducer, applyMiddleware(reduxThunk));
export default store;

Answer 1

在这里，您正在制作 mistack，您正在访问用户而不是用户

function mapStateToProps({ users , content }) {
console.log("content", user.profiles.content) // change user to users 
console.log("content",content) // you can directly access content here
return { user: users, profiles: user.profiles };
}

您可以在此处初始化默认状态

再添加一个类型 FETCH_USER_COMPLETE

import { FETCH_USER } from "../actions";
const initialState = {
content : '',
users : ''
};
export default (state = initialState, action) => {
switch (action.type) {
console.log("action", action.payload)
// successfully fetched, user info and profiles: profiles info
case FETCH_USER:
return { ...state , action.payload };
case FETCH_USER_COMPLETE :
return { ...state , users : action.payload.users , content : action.payload.users.profiles.content };
default:
return state;
}
};

Answer 2

我认为这可能不是最佳实践，但我已经解决了：

从：

querySnapshot.forEach(function(snapshot) {
const profileItems = { ...doc.data(), profiles: snapshot.data() };
dispatch({
type: FETCH_USER,
payload: profileItems
});
});

自：

querySnapshot.forEach(function(snapshot) {
const userItems = { ...doc.data(), ...snapshot.data() };
dispatch({
type: FETCH_USER,
payload: userItems
});
});

我可以得到像{user.content}这样的内容。