02_lesson: added PostsList with redux slice into App

02_lesson_starter/.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

02_lesson_starter/.idea/02_lesson_starter.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

02_lesson_starter/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/02_lesson_starter.iml" filepath="$PROJECT_DIR$/.idea/02_lesson_starter.iml" />
+    </modules>
+  </component>
+</project>

02_lesson_starter/.idea/prettier.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myRunOnSave" value="true" />
+  </component>
+</project>

02_lesson_starter/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

02_lesson_starter/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@reduxjs/toolkit": "^1.8.0",
+        "prettier": "^2.8.4",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-redux": "^7.2.6",
@@ -12617,6 +12618,20 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -24786,6 +24801,11 @@
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
     },
+    "prettier": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw=="
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",

02_lesson_starter/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.0",
+    "prettier": "^2.8.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",

02_lesson_starter/src/App.js

@@ -1,8 +1,9 @@
+import PostsList from "./features/posts/PostsList";
 
 function App() {
   return (
     <main className="App">
-
+      <PostsList />
     </main>
   );
 }

02_lesson_starter/src/app/store.js

@@ -1,8 +1,6 @@
 import { configureStore } from "@reduxjs/toolkit";
-
+import postsReducer from "../features/posts/postsSlice";
 
 export const store = configureStore({
-    reducer: {
+  reducer: { posts: postsReducer },
-
+});
-    }
-})

02_lesson_starter/src/features/posts/PostsList.js

@@ -0,0 +1,21 @@
+import { useSelector } from "react-redux";
+
+const PostsList = () => {
+  const posts = useSelector((state) => state.posts);
+
+  const renderedPosts = posts.map((post) => (
+    <article key={post.id}>
+      <h3>{post.title}</h3>
+      <p>{post.content.substring(0, 100)}</p>
+    </article>
+  ));
+
+  return (
+    <section>
+      <h2>Posts</h2>
+      {renderedPosts}
+    </section>
+  );
+};
+
+export default PostsList;

02_lesson_starter/src/features/posts/postsSlice.js

@@ -0,0 +1,22 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = [
+  {
+    id: "1",
+    title: "Learning Redux Toolkit",
+    content: "I've heard good things.",
+  },
+  {
+    id: "2",
+    title: "Slice...",
+    content: "The more I say slice, the more I want pizza.",
+  },
+];
+
+const postsSlice = createSlice({
+  name: "posts",
+  initialState,
+  reducers: {},
+});
+
+export default postsSlice.reducer;