【发布时间】：2021-08-05 02:42:16
【问题描述】：
我正在尝试为电子商务风格的应用设置我的 redux 商店。我们的数据库是 Firebase，我试图在 redux 商店中模仿 Firebase 的数据结构。我首先使用用户“喜欢”数据对其进行测试，该数据是结构化的并从 Firebase 作为对象返回，如下所示：
Object {
"author": "Stephen Turns",
"condition": "Run Over By Car",
"courseCode": "ENG540",
"description": "A real page turner",
"edition": "3rd",
"id": "-MQZVV7hxTIUqXYFOxbc",
"price": "60",
"sellerName": "...",
"title": "Introduction to Combustion",
"uid": "EG4L42ZQ7qS1U8o79n2UUpHYlA02",
}
当我的操作侦听器从 Firebase 检索到新添加的点赞时，他们会将其发送到 likesReducer，它会更新我的商店。但是，在运行console.log(store.getState()) 时，返回的是这样的：
Object {
"_persist": Object {
"rehydrated": true,
"version": -1,
},
"likesReducer": Object {
"likes": Array [
ChildrenNode {
"children_": SortedMap {
"comparator_": [Function NAME_COMPARATOR],
"root_": LLRBNode {
"color": false,
"key": "-MQZVHl3_gzSwFKpltF9",
"left": LLRBNode {
"color": false,
"key": "-MQZV1mo0QQ4nktIw6wr",
"left": LLRBEmptyNode {},
"right": LLRBEmptyNode {},
"value": ChildrenNode {
"children_": SortedMap {
"comparator_": [Function NAME_COMPARATOR],
"root_": LLRBNode {
"color": false,
"key": "price",
"left": LLRBNode {
"color": true,
"key": "dateTime",
"left": LLRBNode {
"color": false,
"key": "condition",
"left": LLRBNode {
"color": false,
"key": "author",
"left": LLRBEmptyNode {},
"right": LLRBEmptyNode {},
"value": LeafNode {
"lazyHash_": null,
"priorityNode_": ChildrenNode {
"children_": SortedMap {
"comparator_": [Function NAME_COMPARATOR],
"root_": LLRBEmptyNode {},
},
"indexMap_": IndexMap {
"indexSet_": Object {
".priority": PriorityIndex {},
},
"indexes_": Object {
".priority": Object {},
},
},
"lazyHash_": "",
"priorityNode_": null,
},
"value_": "James Stewart",
},
},
"right": LLRBNode {
"color": false,
"key": "courseCode",
"left": LLRBEmptyNode {},
"right": LLRBEmptyNode {},
"value": LeafNode {
"lazyHash_": null,
"priorityNode_": ChildrenNode {
"children_": SortedMap {
"comparator_": [Function NAME_COMPARATOR],
"root_": LLRBEmptyNode {},
},
"indexMap_": IndexMap {
"indexSet_": Object {
".priority": PriorityIndex {},
},
"indexes_": Object {
".priority": Object {},
},
},
"lazyHash_": "",
"priorityNode_": null,
},
"value_": "MTH103",
},
},
"value": LeafNode {
"lazyHash_": null,
"priorityNode_": ChildrenNode {
"children_": SortedMap {
"comparator_": [Function NAME_COMPARATOR],
"root_": LLRBEmptyNode {},
},
"indexMap_": IndexMap {
"indexSet_": Object {
".priority": PriorityIndex {},
},
"indexes_": Object {
".priority": Object {},
},
},
"lazyHash_": "",
"priorityNode_": null,
},
"value_": "New/Like New",
},
},
"right": LLRBNode {
"color": false,
"key": "edition",
"left": LLRBNode {
"color": false,
"key": "description",
"left": LLRBEmptyNode {},
"right": LLRBEmptyNode {},
"value": LeafNode {
"lazyHash_": null,
"priorityNode_": ChildrenNode {
"children_": SortedMap {
"comparator_": [Function NAME_COMPARATOR],
"root_": LLRBEmptyNode {},
},
"indexMap_": IndexMap {
"indexSet_": Object {
".priority": PriorityIndex {},
},
"indexes_": Object {
".priority": Object {},
},
},
"lazyHash_": "",
"priorityNode_": null,
},
"value_": "Only used a few times - no markings at all!",
},
},
"right": LLRBNode {
"color": false,
"key": "id",
"left": LLRBEmptyNode {},
"right": LLRBEmptyNode {},
"value": LeafNode {
"lazyHash_": null,
"priorityNode_": ChildrenNode {
"children_": SortedMap {
"comparator_": [Function NAME_COMPARATOR],
"root_": LLRBEmptyNode {},
},
"indexMap_": IndexMap {
"indexSet_": Object {
".priority": PriorityIndex {},
},
"indexes_": Object {
".priority": Object {},
},
},
"lazyHash_": "",
"priorityNode_": null,
},
"value_": "-MQZV1mo0QQ4nktIw6wr",
},
},
"value": LeafNode {
"lazyHash_": null,
"priorityNode_": ChildrenNode {
"children_": SortedMap {
"comparator_": [Function NAME_COMPARATOR],
"root_": LLRBEmptyNode {},
},
"indexMap_": IndexMap {
"indexSet_": Object {
".priority": PriorityIndex {},
},
"indexes_": Object {
".priority": Object {},
},
},
"lazyHash_": "",
"priorityNode_": null,
},
"value_": "8th",
},
},"value": ChildrenNode {
"children_": SortedMap {
"comparator_": [Function NAME_COMPARATOR],
"root_": LLRBNode {
"color": false,
"key": "time",
"left": LLRBNode {
"color": true,
"key": "date",
"left": LLRBEmptyNode {},
"right": LLRBEmptyNode {},
"value": LeafNode {
"lazyHash_": null,
"priorityNode_": ChildrenNode {
"children_": SortedMap {
"comparator_": [Function NAME_COMPARATOR],
"root_": LLRBEmptyNode {},
},
"indexMap_": IndexMap {
"indexSet_": Object {
".priority": PriorityIndex {},
},
"indexes_": Object {
".priority": Object {},
},
},
"lazyHash_": "",
"priorityNode_": null,
},
"value_": "001082021",
},
},
"right": LLRBEmptyNode {},
"value": LeafNode {
"lazyHash_": null,
"priorityNode_": ChildrenNode {
"children_": SortedMap {
"comparator_": [Function NA...(truncated to the first 10000 characters)
我不知道发生了什么，但是从早期的错误中，大量随机弹出的东西通常是我如何处理 Promises/async 问题的问题......
这是我的 Action 侦听器和 likesReducer 的代码：
//Updates local redux store with Firebase upon app startup
export function getLikesThunk() {
return (dispatch) => {
firebase
.database()
.ref("users/" + firebase.auth().currentUser.uid + "/likes")
.once("value", (snap) => {
return snap;
})
.then((likes) => {
dispatch(getLikes(likes));
});
};
}
//Sets up a Listener for newly added Likes on Firebase, to update the store
export function watchLikeAddedEvent(dispatch) {
firebase
.database()
.ref("users/" + firebase.auth().currentUser.uid + "/likes")
.on("child_added", (snap) => {
dispatch(addLike(snap.val()));
});
}
减速器
const initialState = {
likes: [],
};
const likesReducer = (state = initialState, action) => {
switch (action.type) {
case GET_LIKES:
console.log(
" GOTTEN!!!"
);
var l = convertObjStateToArray(action.payload);
return { ...state, likes: l };
case ADD_LIKE:
console.log(action.payload);
var l = state.likes;
l.push(action.payload);
console.log(
" ADDDED!!!"
);
return { ...state, likes: l };
case REMOVE_LIKE:
var l = state.likes; //should already be an array??
return {
...state,
likes: l.filter((like) => like.id !== action.payload.id),
};
default:
return state;
}
};
const convertObjStateToArray = (state) => {
var stateObj = state;
var stateArray = [];
for (const [key, value] of Object.entries(stateObj)) {
stateArray.push(value);
}
return stateArray;
};
【问题讨论】：
-
return snap里面的 getLikesThunk 是故意的吗？还是应该是return snap.val()？
标签： javascript firebase react-native redux promise