Xây dựng PostsList, PostsNew tích hợp history, Router, store (ok)

C:\Users\Administrator\Desktop\blog\src\components\App.tsx

import React from 'react';
import { Router, Route, Switch, Link } from 'react-router-dom';
import createBrowserHistory from './../history';
import PostsList from './../containers/PostsList';
import PostsNew from './../containers/PostsNew';
const history = createBrowserHistory();
class App extends React.Component {
	render() {
    return (
      <div className="ui container">
        <Router history={history}>
        	<div>
        		<h1>Header</h1>
        		<nav className="navbar navbar-expand-lg navbar-light bg-light">
						  <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
						    <div className="navbar-nav">
						      <Link className="d-block mr-4" to={'/'}>Go to Home</Link>
						      <Link className="d-block" to={'/posts/new'}>Create new post</Link>
						    </div>
						  </div>
						</nav>
        		<Switch>
        			<Route path="/" exact component={PostsList} />
        			<Route path="/posts" exact component={PostsList} />
        			<Route path="/posts/new" exact component={PostsNew} />
        		</Switch>
        	</div>
        </Router>
      </div>
    );
  }
}
export default App;

C:\Users\Administrator\Desktop\blog\src\index.tsx

import React from 'react';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom';
import App from './components/App';
import { store, RootState } from './store';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
  document.getElementById('root')
);
serviceWorker.unregister();

C:\Users\Administrator\Desktop\blog\src\reducers\postsReducer.tsx

import { Reducer } from 'redux';
export interface Post {
  id: number;
  title: string;
  author: string;
}
export interface Posts {
  [id: number]: Post;
}
export interface PostsState {
  items: Posts;
  loading: boolean;
  error: String | null
}
const initialState = {
  items: {},
  loading: false,
  error: null
};
export const postsReducer: Reducer < PostsState, any > = (state = initialState,action) => {
  switch (action.type) {
    default:
      return state;
  }
};

C:\Users\Administrator\Desktop\blog\src\store.tsx

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import reduxThunk, { ThunkMiddleware } from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { postsReducer} from './reducers/postsReducer';
export interface RootState {
  readonly posts: any;
}
const rootReducer = combineReducers<RootState>({
    posts: postsReducer
});
export const store = createStore(
    rootReducer,
    composeWithDevTools(
        applyMiddleware(reduxThunk as ThunkMiddleware<RootState, any>)
    )
);

C:\Users\Administrator\Desktop\blog\src\containers\PostsList\index.tsx

import React from 'react';
class PostsList extends React.Component {
  render() {
    return (
    	<div>
    		PostsList
    	</div>
    );
  }
}
export default PostsList;

C:\Users\Administrator\Desktop\blog\src\containers\PostsNew\index.tsx

import React from 'react';
class PostsNew extends React.Component {
  render() {
    return (
    	<div>
    		PostsNew
    	</div>
    );
  }
}
export default PostsNew;