I have a react 18 app and I am using Redux Toolkit for state management.
Below is an image of the blogs app on the users page. When I add/create a new blog on the blogs page, the new blog gets added properly. However, when I navigate to the users page the user in the box should have 3 blogs instead of 2. So, the number of blogs created by the user does not get updated immediately. But, when I reload the page the users page shows me the new number of blogs i.e., 3 for the user in the box.
QUESTION: How can I make the users page also reactive to when I add a new blog without doing a reload?
Below are some of my files.
blogReducer.js file:
import { createSlice } from '@reduxjs/toolkit';
import blogService from '../services/blogs';
import { setNotification } from './notificationReducer';
const blogSlice = createSlice({
name: 'blogs',
initialState: [],
reducers: {
setBlogs(state, action) {
const sortedBlogs = [...action.payload].sort((a, b) => b.likes - a.likes);
return sortedBlogs;
},
appendBlog(state, action) {
state.push(action.payload);
},
increaseLikes(state, action) {
const id = action.payload;
const blogToVote = state.find((blog) => blog.id === id);
const blogUpdated = {
...blogToVote,
likes: blogToVote.likes + 1,
};
const blogList = state.map((blog) =>
blog.id !== id ? blog : blogUpdated,
);
const sortedBlogs = blogList.sort((a, b) => b.likes - a.likes);
return sortedBlogs;
},
removeBlog(state, action) {
console.log('removeBlog action payload from blogReducer', action.payload);
return state.filter((blog) => blog.id !== action.payload);
},
},
});
export const { setBlogs, appendBlog, increaseLikes, removeBlog } =
blogSlice.actions;
export const initializeBlogs = () => {
return async (dispatch) => {
console.log('initializing blogs from blogReducer');
const blogs = await blogService.getAllBlogs();
dispatch(setBlogs(blogs));
};
};
export const createBlog = (blog) => {
console.log('creating blog');
return async (dispatch) => {
try {
const newBlog = await blogService.createBlog(blog);
dispatch(appendBlog(newBlog));
dispatch(
setNotification(
{ message: `SUCCESS: Added ${newBlog.title} blog.`, isError: false },
5000,
),
);
} catch (error) {
console.log('ERROR when creating blog: ', error.message);
dispatch(
setNotification(
{ message: error.response.data.error, isError: true },
5000,
),
);
}
};
};
export const voteBlog = (id, title) => {
console.log('voting blog');
return async (dispatch) => {
try {
const blogToVote = await blogService.getBlogById(id);
console.log('voted blog', blogToVote);
const blogUpdated = {
...blogToVote,
likes: blogToVote.likes + 1,
};
await blogService.updateBlog(blogUpdated);
dispatch(increaseLikes(id));
} catch (error) {
console.log('ERROR when voting blog: ', error.message);
dispatch(
setNotification(
{
message: `Blog '${title}' was removed from the server.`,
isError: true,
},
5000,
),
);
}
};
};
export const deleteBlogById = (id) => {
console.log('deleting blog');
return async (dispatch) => {
try {
await blogService.deleteBlog(id);
console.log('deleted blog');
dispatch(removeBlog(id));
} catch (error) {
console.log('ERROR when deleting blog: ', error.message);
alert('Sorry! Blog was already removed from the server.');
}
};
};
export default blogSlice.reducer;
userReducer.js file:
import { createSlice } from "@reduxjs/toolkit";
import userService from '../services/users';
const userSlice = createSlice({
name: 'users',
initialState: [],
reducers: {
setUsers(state, action) {
const sortedUsers = [...action.payload].sort();
return sortedUsers;
}
},
});
export const { setUsers } = userSlice.actions;
export const initializeUsers = () => {
return async (dispatch) => {
console.log('initializing users from userReducer');
const users = await userService.getAllUsers();
dispatch(setUsers(users));
}
}
export default userSlice.reducer;
loginReducer.js file:
import { createSlice } from '@reduxjs/toolkit';
const loginSlice = createSlice({
name: 'loggedInUser',
initialState: null,
reducers: {
setLoginUser(state, action) {
return action.payload;
},
setLogoutUser() {
return null;
},
},
});
export const { setLoginUser, setLogoutUser } = loginSlice.actions;
export default loginSlice.reducer;
App.jsx file:
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Route, Routes } from "react-router-dom";
import { initializeBlogs } from './reducers/blogReducer';
import { initializeUsers } from './reducers/userReducer';
import Notification from './components/Notification';
import LoginPage from './pages/LoginPage';
import BlogsPage from './pages/BlogsPage';
import UsersPage from './pages/UsersPage';
import MenuBar from './components/MenuBar';
const App = () => {
const dispatch = useDispatch();
const loggedInUserFromStore = useSelector(({ loggedInUser }) => loggedInUser);
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
useEffect(() => {
if (loggedInUserFromStore) {
dispatch(initializeBlogs());
dispatch(initializeUsers());
}
}, [loggedInUserFromStore, dispatch]);
return (
<div>
<h1>Blogs App</h1>
<MenuBar setUsername={setUsername} setPassword={setPassword} />
<Notification />
<LoginPage
username={username}
password={password}
setUsername={setUsername}
setPassword={setPassword}
/>
<Routes>
<Route path='/users' element={loggedInUserFromStore && <UsersPage /> } />
<Route path='/' element={loggedInUserFromStore && <BlogsPage /> } />
</Routes>
</div>
);
};
export default App;
BlogsPage.jsx file:
import { useRef } from 'react';
import Togglable from '../components/Togglable';
import NewBlogForm from '../components/NewBlogForm';
import BlogsList from '../components/BlogsList';
import { useDispatch } from 'react-redux';
import { createBlog } from '../reducers/blogReducer';
const BlogsPage = () => {
const dispatch = useDispatch();
const blogFormRef = useRef();
const addBlog = (newBlog) => {
blogFormRef.current.toggleVisibility();
dispatch(createBlog(newBlog));
};
const blogForm = () => (
<Togglable buttonLabel="new blog" ref={blogFormRef}>
<NewBlogForm createBlog={addBlog} />
</Togglable>
);
return (
<>
{blogForm()}
<BlogsList />
</>
);
}
export default BlogsPage;
BlogsList.jsx file:
import { useSelector } from 'react-redux';
import Blog from './Blog';
const BlogsList = () => {
const blogsFromStore = useSelector(({ blogs }) => blogs);
return (
<>
<h1>Blogs</h1>
<ul style={{ listStyleType: 'none', padding: 0 }}>
{blogsFromStore.map((blog) => (
<Blog key={blog.id} blog={blog} />
))}
</ul>
</>
);
}
export default BlogsList;
Blog.jsx file:
import { useState } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { deleteBlogById, voteBlog } from '../reducers/blogReducer';
const Blog = ({ blog }) => {
// styles
const blogStyle = {
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 10,
border: 'solid',
borderWidth: 1,
marginBottom: 5,
};
const removeBtnStyle = {
backgroundColor: 'lightblue',
padding: 5,
borderRadius: 10,
fontWeight: 'bold',
};
const [viewBlogInfo, setViewBlogInfo] = useState(false);
const dispatch = useDispatch();
const loggedInUserFromStore = useSelector(({ loggedInUser }) => loggedInUser);
const handleLikes = () => {
dispatch(voteBlog(blog.id, blog.title));
};
const handleDeleteBlog = () => {
const toDelete = window.confirm(`Delete "${blog.title}" blog?`);
console.log({ toDelete });
if (toDelete) {
dispatch(deleteBlogById(blog.id));
}
};
const toggleShow = () => {
setViewBlogInfo(!viewBlogInfo);
};
return (
<li style={blogStyle} className="blog">
<p>
<span data-testid="title">{blog.title} </span>
<button onClick={toggleShow} className="viewHideBtn">
{viewBlogInfo ? 'hide' : 'view'}
</button>
</p>
{viewBlogInfo && (
<div>
<div>
<div>Author: {blog.author}</div>
<div>
<span data-testid="likes">Likes: {blog.likes}</span>
<button onClick={handleLikes} className="likeBtn">
like
</button>
</div>
<div>URL: {blog.url}</div>
<div>Added by: {blog.user.name}</div>
</div>
<br />
{blog.user.username === loggedInUserFromStore.username && (
<div>
<button
style={removeBtnStyle}
onClick={handleDeleteBlog}
className="removeBtn"
>
remove
</button>
</div>
)}
</div>
)}
</li>
);
};
Blog.propTypes = {
blog: PropTypes.shape({
id: PropTypes.string,
title: PropTypes.string.isRequired,
author: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
likes: PropTypes.number,
user: PropTypes.shape({
id: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
username: PropTypes.string.isRequired,
}),
}).isRequired,
};
export default Blog;
NewBlogForm.jsx file:
import { useState } from 'react';
import PropTypes from 'prop-types';
const NewBlogForm = ({ createBlog }) => {
const [newBlogTitle, setNewBlogTitle] = useState('');
const [newBlogAuthor, setNewBlogAuthor] = useState('');
const [newBlogUrl, setNewBlogUrl] = useState('');
const addBlog = (event) => {
event.preventDefault();
createBlog({
title: newBlogTitle,
author: newBlogAuthor,
url: newBlogUrl,
});
setNewBlogTitle('');
setNewBlogAuthor('');
setNewBlogUrl('');
};
return (
<div>
<h2>Create a new blog</h2>
<form onSubmit={addBlog}>
<div>
title:
<input
data-testid="blog-title"
value={newBlogTitle}
onChange={(event) => setNewBlogTitle(event.target.value)}
name="title"
id="blog-title"
/>
</div>
<div>
author:
<input
data-testid="blog-author"
value={newBlogAuthor}
onChange={(event) => setNewBlogAuthor(event.target.value)}
name="author"
id="blog-author"
/>
</div>
<div>
url:
<input
data-testid="blog-url"
value={newBlogUrl}
onChange={(event) => setNewBlogUrl(event.target.value)}
name="url"
id="blog-url"
/>
</div>
<button type="submit">create</button>
</form>
</div>
);
};
NewBlogForm.propTypes = {
createBlog: PropTypes.func.isRequired,
};
export default NewBlogForm;
UsersPage.jsx file:
import UsersList from "../components/UsersList";
const UsersPage = () => {
return <UsersList />;
}
export default UsersPage;
UsersList.jsx file:
import { useSelector } from "react-redux";
const UsersList = () => {
const usersFromStore = useSelector(({ users }) => users);
console.log('<UsersList /> component - usersFromStore: ', usersFromStore);
return (
<>
<h1>Users</h1>
<table>
<thead>
<tr>
<th>names</th>
<th>blogs created</th>
</tr>
</thead>
<tbody>
{usersFromStore.map(user => (
<tr key={user.id}>
<td>{user.name || user.username}</td>
<td>{user.blogs.length}</td>
</tr>
))}
</tbody>
</table>
</>
);
}
export default UsersList;