setup completed.

Author: devbinod

package.json

@@ -6,13 +6,21 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/axios": "^0.14.0",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.6",
+    "@types/redux": "^3.6.0",
+    "@types/redux-thunk": "^2.1.0",
+    "axios": "^0.19.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
     "react-scripts": "3.3.0",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
     "typescript": "~3.7.2"
   },
   "scripts": {

src/App.css

@@ -2,37 +2,7 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.postDiv {
+  margin: 30;
+  border: 2px solid #ffabff;
 }

src/App.tsx

@@ -1,26 +1,18 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import logo from "./logo.svg";
+import "./App.css";
+import Post from "./components/post";
+import { Provider } from "react-redux";
+import store from "./store";
 
 const App: React.FC = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Provider store={store}>
+      <div className="App">
+        <Post />
+      </div>
+    </Provider>
   );
-}
+};
 
 export default App;

src/actions/post.ts

@@ -0,0 +1,15 @@
+import { Dispatch, AnyAction } from "redux";
+import axios from "axios";
+import { setFetchPost } from "./types/post";
+
+export const getAllPosts = () => {
+  return async (dispatch: Dispatch<AnyAction>) => {
+    axios
+      .get("http://jsonplaceholder.typicode.com/posts?_limit=10")
+      .then(res => {
+        console.log("called.");
+        dispatch(setFetchPost(res.data));
+      })
+      .catch(err => console.log(err));
+  };
+};

src/actions/types/post.ts

@@ -0,0 +1,15 @@
+import { PostState } from "../../reducers/types/Post";
+
+export const FETCH_POST = "@posts/FETCH_POST";
+
+export type FetchPost = {
+  type: typeof FETCH_POST;
+  payload: PostState[];
+};
+
+export const setFetchPost = (posts: PostState[]) => {
+  return {
+    type: FETCH_POST,
+    payload: posts
+  };
+};

src/components/container.ts

@@ -0,0 +1,31 @@
+import { connect } from "react-redux";
+import { StoreState } from "../store/storetypes";
+import { ThunkDispatch } from "redux-thunk";
+import { Action } from "redux";
+import { getAllPosts } from "../actions/post";
+import { PostState } from "../reducers/types/Post";
+
+export interface MapDispatchToProps {
+  getAllPosts: () => void;
+}
+
+const mapDispatchToState = (
+  dispatch: ThunkDispatch<StoreState, null, Action>
+): MapDispatchToProps => {
+  return {
+    getAllPosts: () => dispatch(getAllPosts())
+  };
+};
+
+export interface MapStateToProps {
+  posts: PostState[];
+}
+
+const mapStateToProps = (state: StoreState): MapStateToProps => {
+  return {
+    posts: state.posts
+  };
+};
+
+export const container = connect(mapStateToProps, mapDispatchToState);
+export default container;

src/components/post.tsx

@@ -0,0 +1,55 @@
+import React, { Component } from "react";
+
+import { PostState } from "../reducers/types/Post";
+
+import container, { MapStateToProps, MapDispatchToProps } from "./container";
+
+export type InitialPostState = {
+  posts: Array<PostState>;
+};
+
+export const initialPostValue: InitialPostState = {
+  posts: []
+};
+
+export type PostProps = MapDispatchToProps & MapStateToProps;
+
+export class Post extends Component<PostProps, InitialPostState> {
+  constructor(props: PostProps) {
+    super(props);
+    this.state = {
+      posts: []
+    };
+  }
+
+  componentDidMount() {
+    this.props.getAllPosts();
+  }
+
+  render() {
+    const { posts } = this.props;
+    console.log("posts ", posts);
+    console.log("post length", posts.length);
+
+    return (
+      <div>
+        {this.props.posts.length > 1 ? (
+          <div>
+            {this.props.posts.map((p: PostState) => {
+              return (
+                <div key={p.id} className="postDiv">
+                  <div>Title: {p.title}</div>
+                  <div>{`Body ${p.body}`}</div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div>loading.........</div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default container(Post);

src/reducers/index.ts

@@ -0,0 +1,8 @@
+import { combineReducers } from "redux";
+import { postReducer as posts } from "./postReducer";
+
+const rootReduer = combineReducers({
+  posts
+});
+
+export default rootReduer;

src/reducers/postReducer.ts

@@ -0,0 +1,21 @@
+import { PostState } from "./types/Post";
+import { Dispatch, AnyAction } from "redux";
+import { FETCH_POST } from "../actions/types/post";
+
+export type InitialState = {
+  posts: Array<PostState>;
+};
+
+const initialState: InitialState = {
+  posts: []
+};
+
+export const postReducer = (state = initialState, action: AnyAction) => {
+  switch (action.type) {
+    case FETCH_POST:
+      return action.payload;
+
+    default:
+      return state;
+  }
+};

src/reducers/types/Post.ts

@@ -0,0 +1,6 @@
+export interface PostState {
+  userId?: number;
+  id?: number;
+  title: string;
+  body: string;
+}