71

Author: kossiecoder

src/components/BlogList.js

@@ -8,6 +8,7 @@ import { useLocation } from 'react-router-dom';
 import propTypes from 'prop-types';
 import Toast from '../components/Toast';
 import useToast from '../hooks/toast';
+import { useSelector } from 'react-redux';
 
 const BlogList = ({ isAdmin }) => {
   const history = useHistory();
@@ -20,6 +21,10 @@ const BlogList = ({ isAdmin }) => {
   const [numberOfPosts, setNumberOfPosts] = useState(0);
   const [numberOfPages, setNumberOfPages] = useState(0);
   const [searchText, setSearchText] = useState('');
+  const toasts1 = useSelector((state) => {
+    return state.toast.toasts;
+  });
+  console.log('hello', toasts1)
 
   const [toasts, addToast, deleteToast] = useToast();
   const limit = 5;

src/components/Card.js

@@ -1,6 +1,11 @@
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 
 const Card = ({ title, onClick, children }) => {
+  const toasts = useSelector((state) => {
+    return state.toast.toasts;
+  });
+  console.log('hello1', toasts);
   return (
     <div 
       className="card mb-3 cursor-pointer"

src/index.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App.js';
 import { Provider } from 'react-redux';
-import { store } from './store';
+import { store } from './store/store';
 
 ReactDOM.render(
   <Provider store={store}>

src/store.js renamed to src/store/store.js

@@ -1,5 +1,8 @@
 import { configureStore } from '@reduxjs/toolkit'
+import toastReducer from './toastSlice'
 
 export const store = configureStore({
-  reducer: {},
+  reducer: {
+    toast: toastReducer
+  },
 })

src/store/toastSlice.js

@@ -0,0 +1,15 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  toasts: []
+};
+
+const toastSlice = createSlice({
+  name: 'toast',
+  initialState,
+  reducers: {
+
+  } 
+})
+
+export default toastSlice.reducer;