03_lesson: Add redux Thunk
This commit is contained in:
parent
024b2b589d
commit
476e7259e7
68
02_lesson_starter/package-lock.json
generated
68
02_lesson_starter/package-lock.json
generated
@ -9,6 +9,7 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.8.0",
|
||||
"axios": "^1.3.4",
|
||||
"date-fns": "^2.29.3",
|
||||
"prettier": "^2.8.4",
|
||||
"react": "^17.0.2",
|
||||
@ -4239,6 +4240,29 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
|
||||
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axios/node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
|
||||
@ -7243,9 +7267,9 @@
|
||||
"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.14.9",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
|
||||
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
@ -12749,6 +12773,11 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/psl": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
|
||||
@ -18877,6 +18906,28 @@
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
|
||||
"integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw=="
|
||||
},
|
||||
"axios": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
|
||||
"integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"requires": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"axobject-query": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
|
||||
@ -21093,9 +21144,9 @@
|
||||
"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg=="
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.14.9",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
|
||||
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
|
||||
},
|
||||
"fork-ts-checker-webpack-plugin": {
|
||||
"version": "6.5.0",
|
||||
@ -24910,6 +24961,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"psl": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.8.0",
|
||||
"axios": "^1.3.4",
|
||||
"date-fns": "^2.29.3",
|
||||
"prettier": "^2.8.4",
|
||||
"react": "^17.0.2",
|
||||
|
||||
@ -1,42 +1,31 @@
|
||||
import { createSlice, nanoid } from "@reduxjs/toolkit";
|
||||
import { sub } from "date-fns";
|
||||
import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit';
|
||||
import { sub } from 'date-fns';
|
||||
import axios from 'axios';
|
||||
|
||||
const initialState = [
|
||||
{
|
||||
id: "1",
|
||||
title: "Learning Redux Toolkit",
|
||||
content: "I've heard good things.",
|
||||
date: sub(new Date(), { minutes: 10 }).toISOString(),
|
||||
reactions: {
|
||||
thumbsUp: 0,
|
||||
wow: 0,
|
||||
heart: 0,
|
||||
rocket: 0,
|
||||
coffee: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Slice...",
|
||||
content: "The more I say slice, the more I want pizza.",
|
||||
date: sub(new Date(), { minutes: 5 }).toISOString(),
|
||||
reactions: {
|
||||
thumbsUp: 0,
|
||||
wow: 0,
|
||||
heart: 0,
|
||||
rocket: 0,
|
||||
coffee: 0,
|
||||
},
|
||||
},
|
||||
];
|
||||
const POSTS_URL = 'https://jsonplaceholder.typicode.com/posts';
|
||||
|
||||
const initialState = {
|
||||
posts: [],
|
||||
status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed'
|
||||
error: null,
|
||||
};
|
||||
|
||||
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
|
||||
try {
|
||||
const response = await axios.get(POSTS_URL);
|
||||
return [...response.data];
|
||||
} catch (err) {
|
||||
return err.message;
|
||||
}
|
||||
});
|
||||
|
||||
const postsSlice = createSlice({
|
||||
name: "posts",
|
||||
name: 'posts',
|
||||
initialState,
|
||||
reducers: {
|
||||
postAdded: {
|
||||
reducer: (state, action) => {
|
||||
state.push(action.payload);
|
||||
state.posts.push(action.payload);
|
||||
},
|
||||
prepare(title, content, userId) {
|
||||
// adding new post also need userid (author)
|
||||
@ -60,15 +49,44 @@ const postsSlice = createSlice({
|
||||
},
|
||||
reactionAdded(state, action) {
|
||||
const { postId, reaction } = action.payload;
|
||||
const existingPost = state.find((post) => post.id === postId);
|
||||
const existingPost = state.posts.find((post) => post.id === postId);
|
||||
if (existingPost) {
|
||||
existingPost.reactions[reaction]++; // this kind of immer action can only happen in slice
|
||||
}
|
||||
},
|
||||
},
|
||||
extraReducers(builder) {
|
||||
// use traditional redux way of defining reducers
|
||||
builder
|
||||
.addCase(fetchPosts.pending, (state, action) => {
|
||||
state.status = 'loading';
|
||||
})
|
||||
.addCase(fetchPosts.fulfilled, (state, action) => {
|
||||
state.status = 'succeeded';
|
||||
// Adding date and reactions
|
||||
let min = 1;
|
||||
const loadedPosts = action.payload.map((post) => {
|
||||
post.date = sub(new Date(), { minutes: min++ }).toISOString();
|
||||
post.reactions = {
|
||||
thumbsUp: 0,
|
||||
horray: 0,
|
||||
heart: 0,
|
||||
rocket: 0,
|
||||
eyes: 0,
|
||||
};
|
||||
return post;
|
||||
});
|
||||
// Add an fetched posts to the array
|
||||
state.posts = state.posts.concat(loadedPosts);
|
||||
})
|
||||
.addCase(fetchPosts.rejected, (state, action) => {
|
||||
state.status = 'failed';
|
||||
state.error = action.error.message;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const selectAllPosts = (state) => state.posts;
|
||||
export const selectAllPosts = (state) => state.posts.posts; // first posts is meaning name of the slice
|
||||
|
||||
export const { postAdded, reactionAdded } = postsSlice.actions;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user