Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
299 additions
and
55 deletions.
There are no files selected for viewing
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 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 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)); | ||
}; | ||
}; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
}; | ||
}; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { combineReducers } from "redux"; | ||
import { postReducer as posts } from "./postReducer"; | ||
|
||
const rootReduer = combineReducers({ | ||
posts | ||
}); | ||
|
||
export default rootReduer; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
}; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export interface PostState { | ||
userId?: number; | ||
id?: number; | ||
title: string; | ||
body: string; | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { createStore, applyMiddleware, compose } from "redux"; | ||
import thunk from "redux-thunk"; | ||
import rootReduer from "../reducers"; | ||
|
||
const middleWare = [thunk]; | ||
|
||
const initialState = {}; | ||
declare global { | ||
interface Window { | ||
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose; | ||
} | ||
} | ||
|
||
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; | ||
const store = createStore( | ||
rootReduer, | ||
initialState, | ||
composeEnhancers(applyMiddleware(...middleWare)) | ||
); | ||
|
||
export default store; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { PostState } from "../reducers/types/Post"; | ||
|
||
export type StoreState = { | ||
posts: PostState[]; | ||
}; |
Oops, something went wrong.