Я играю с простым приложением, которое отображает коллекцию сообщений из firebase и позволяет пользователю добавлять в него документы. Сообщения публикуются через PostsContext, который содержит функцию ADD. UseReducer вызывается дважды, ничего не меняя. Проблема в том, что я пишу в firebase из ADD, и это приводит к дублированию строк.
export const PostsContext = React.createContext();
export const PostsProvider = function ({ children }) {
const reducer = function (state, action) {
switch (action.type) {
case "ADD": {
const newPost = {
id: id(),
title: action.payload.title,
content: action.payload.comment,
};
console.log("THIS GETS CALLED TWICE");
firestore.collection("posts").add(newPost);
return [newPost, ...state];
}
case "INIT": {
console.log(action.payload);
return [...action.payload.posts];
}
}
return state;
};
const [posts, dispatch] = useReducer(reducer, []);
const addPost = function (title, comment) {
dispatch({
type: "ADD",
payload: {
title,
comment,
},
});
};
const initPosts = function (posts) {
dispatch({
type: "INIT",
payload: {
posts,
},
});
};
const value = { posts, addPost, initPosts };
return (
<PostsContext.Provider value={value}>{children}</PostsContext.Provider>
);
};