patwadeepak

npx create-react-app my-app --template redux

patwadeepak

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];

patwadeepak

// 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,
});

patwadeepak

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())

patwadeepak

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);

patwadeepak

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>

patwadeepak

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));
  }, []);

patwadeepak

import { useState } from "react";

const PostForm = ({ addPost }) => {
  const [formData, setFormData] = useState({
    title: "",
    body: "",
  });

  const handleChange = (ev) => {
    setFormData({

patwadeepak

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]);
  };