diff --git a/02_lesson_starter/.idea/.gitignore b/02_lesson_starter/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/02_lesson_starter/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/02_lesson_starter/.idea/02_lesson_starter.iml b/02_lesson_starter/.idea/02_lesson_starter.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/02_lesson_starter/.idea/02_lesson_starter.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/02_lesson_starter/.idea/modules.xml b/02_lesson_starter/.idea/modules.xml new file mode 100644 index 0000000..2987cce --- /dev/null +++ b/02_lesson_starter/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/02_lesson_starter/.idea/prettier.xml b/02_lesson_starter/.idea/prettier.xml new file mode 100644 index 0000000..b0ab31a --- /dev/null +++ b/02_lesson_starter/.idea/prettier.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/02_lesson_starter/.idea/vcs.xml b/02_lesson_starter/.idea/vcs.xml new file mode 100644 index 0000000..6c0b863 --- /dev/null +++ b/02_lesson_starter/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/02_lesson_starter/package-lock.json b/02_lesson_starter/package-lock.json index ab9d777..d52929d 100644 --- a/02_lesson_starter/package-lock.json +++ b/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", diff --git a/02_lesson_starter/package.json b/02_lesson_starter/package.json index 52a223d..5d20c4a 100644 --- a/02_lesson_starter/package.json +++ b/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", diff --git a/02_lesson_starter/src/App.js b/02_lesson_starter/src/App.js index 0ba9bfc..06a69ae 100644 --- a/02_lesson_starter/src/App.js +++ b/02_lesson_starter/src/App.js @@ -1,8 +1,9 @@ +import PostsList from "./features/posts/PostsList"; function App() { return (
- +
); } diff --git a/02_lesson_starter/src/app/store.js b/02_lesson_starter/src/app/store.js index 8096d39..972e003 100644 --- a/02_lesson_starter/src/app/store.js +++ b/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: { - - } -}) \ No newline at end of file + reducer: { posts: postsReducer }, +}); diff --git a/02_lesson_starter/src/features/posts/PostsList.js b/02_lesson_starter/src/features/posts/PostsList.js new file mode 100644 index 0000000..817ac40 --- /dev/null +++ b/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) => ( +
+

{post.title}

+

{post.content.substring(0, 100)}

+
+ )); + + return ( +
+

Posts

+ {renderedPosts} +
+ ); +}; + +export default PostsList; diff --git a/02_lesson_starter/src/features/posts/postsSlice.js b/02_lesson_starter/src/features/posts/postsSlice.js new file mode 100644 index 0000000..989fbf5 --- /dev/null +++ b/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;