This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npx create-react-app my-app --template redux |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Posts from "./Components/Posts"; | |
import PostForm from "./Components/PostForm"; | |
import { useEffect, createContext, useReducer } from "react"; | |
const appReducer = (state, action) => { | |
switch (action.type) { | |
case "FETCH_POSTS": | |
return [...state, ...action.payload]; | |
case "NEW_POST": | |
return [action.payload, ...state]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// this is inside reducers folder. do not confuse this with react app's index.js | |
import { combineReducers } from "redux"; | |
import postReducer from "./postReducer"; | |
export default combineReducers({ | |
posts: postReducer, | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import "../CSS/Post.css"; | |
import { useEffect } from "react"; | |
import { func, array, object } from "prop-types"; | |
import { connect } from "react-redux"; | |
import { fetchPosts } from "../actions/postActions"; | |
const Posts = ({ posts, fetchPosts }) => { | |
useEffect(() => { | |
fetch("https://jsonplaceholder.typicode.com/posts") | |
.then((res) => res.json()) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import "../CSS/PostForm.css"; | |
import { useState } from "react"; | |
import { connect } from "react-redux"; | |
import { object } from "prop-types"; | |
import { createNewPost } from "../actions/postActions"; | |
const initialFormState = { title: "", body: "" }; | |
const PostForm = ({ createNewPost }) => { | |
const [formData, setFormData] = useState(initialFormState); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Provider } from "react-redux"; | |
import store from "./store"; | |
import Posts from "./Components/Posts"; | |
import PostForm from "./Components/PostForm"; | |
const App = () => ( | |
<Provider store={store}> | |
<div className="app-container"> | |
<h1>Blog Post App using Old ways of Redux</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import "../CSS/Post.css"; | |
import { useEffect } from "react"; | |
const Posts = ({ setPostData, PostData }) => { | |
useEffect(() => { | |
fetch("https://jsonplaceholder.typicode.com/posts") | |
.then((res) => res.json()) | |
.then((data) => setPostData(data)); | |
}, []); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from "react"; | |
const PostForm = ({ addPost }) => { | |
const [formData, setFormData] = useState({ | |
title: "", | |
body: "", | |
}); | |
const handleChange = (ev) => { | |
setFormData({ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Posts from "./Components/Posts"; | |
import PostForm from "./Components/PostForm"; | |
import { useState } from "react"; | |
const App = () => { | |
const [PostData, setPostData] = useState([]); | |
const addPost = (formData) => { | |
setPostData([formData, ...PostData]); | |
}; |