import { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Route, Switch, NavLink } from 'react-router-dom'; import SingleArticle from '../SingleArticle'; import { fetchArticles } from '../../store/articleReducer'; export const ArticleList = () => { const articleList = useSelector(state=>state.articleState.entries); const dispatch = useDispatch(); console.log("ArticleListttt: ", articleList) useEffect(() => { dispatch(fetchArticles()); }, [dispatch]); return ( <div> <h1>Article List</h1> <ol> {articleList.forEach(article => <li key={article.id}><NavLink to={`/article/${article.id}`}>{article.title}</NavLink></li> ) } </ol> <Switch> <Route path='/article/:id'> <SingleArticle /> </Route> </Switch> </div> ); }; export default ArticleList;
const initialState = { entries: {}, isLoading: true }; const normalizedItems = {} const articleReducer = (state = initialState, action) => { switch (action.type) { case LOAD_ARTICLES: return { ...state, entries: [...action.articles] }; case ADD_ARTICLE: const id = parseInt(action.article.id) return { ...state, entries: [...state.entries, normalizedItems[id] = action.article] }; default: return state; } }; export default articleReducer;
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)