diff --git a/02_lesson_starter/src/App.js b/02_lesson_starter/src/App.js
index 06a69ae..e3a7b79 100644
--- a/02_lesson_starter/src/App.js
+++ b/02_lesson_starter/src/App.js
@@ -1,8 +1,10 @@
import PostsList from "./features/posts/PostsList";
+import AddPostForm from "./features/posts/AddPostForm";
function App() {
return (
+
);
diff --git a/02_lesson_starter/src/features/posts/AddPostForm.js b/02_lesson_starter/src/features/posts/AddPostForm.js
new file mode 100644
index 0000000..30174e1
--- /dev/null
+++ b/02_lesson_starter/src/features/posts/AddPostForm.js
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { nanoid } from "@reduxjs/toolkit";
+import { postAdded } from "./postsSlice";
+import { useDispatch } from "react-redux";
+
+const AddPostForm = () => {
+ const [title, setTitle] = useState(""); // Temporary state for adding information in form
+ const [content, setContent] = useState("");
+ const dispatch = useDispatch();
+
+ const onTitleChanged = (e) => setTitle(e.target.value);
+ const onContentChanged = (e) => setContent(e.target.value);
+
+ const onSavePostClicked = () => {
+ if (title && content) {
+ dispatch(
+ postAdded({
+ id: nanoid(),
+ title,
+ content,
+ })
+ );
+ setTitle("");
+ setContent("");
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default AddPostForm;
diff --git a/02_lesson_starter/src/features/posts/postsSlice.js b/02_lesson_starter/src/features/posts/postsSlice.js
index e0efeb5..6869183 100644
--- a/02_lesson_starter/src/features/posts/postsSlice.js
+++ b/02_lesson_starter/src/features/posts/postsSlice.js
@@ -16,9 +16,15 @@ const initialState = [
const postsSlice = createSlice({
name: "posts",
initialState,
- reducers: {},
+ reducers: {
+ postAdded(state, action) {
+ state.push(action.payload); // immer.js add new payload without mutation
+ },
+ },
});
export const selectAllPosts = (state) => state.posts;
+export const { postAdded } = postsSlice.actions;
+
export default postsSlice.reducer;