Created
December 17, 2019 08:18
-
-
Save toddlucas/e12a85f3d30cd62740680acd32b0b627 to your computer and use it in GitHub Desktop.
Minimalist TypeScript React Redux additions
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 * as React from "react"; | |
import * as ReactDOM from "react-dom"; | |
import { Provider } from "react-redux"; | |
import { Router } from "react-router-dom"; | |
import { RouteMap } from "./routes"; | |
import store from "./store"; | |
import history from "./history"; | |
ReactDOM.render(( | |
<Provider store={store}> | |
<Router history={history}><RouteMap /></Router> | |
</Provider> | |
), | |
document.getElementById("content")); |
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 { Action, Dispatch } from "redux"; | |
import { ThunkAction } from "redux-thunk"; | |
export const EXAMPLE_GET = "EXAMPLE_GET"; | |
export const EXAMPLE_POST = "EXAMPLE_POST"; | |
export interface ExampleGetAction extends Action<typeof EXAMPLE_GET> { | |
// response: ExampleGetResponse; | |
} | |
export interface ExamplePostAction extends Action<typeof EXAMPLE_POST> { | |
// response: ExamplePostResponse; | |
} | |
export type ExampleActionTypes | |
= ExampleGetAction | |
| ExamplePostAction | |
; |
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 { createBrowserHistory } from "history"; | |
export default createBrowserHistory(); |
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 * as React from "react"; | |
import { Route, Switch } from "react-router-dom"; | |
import NotFoundView from "./views_NotFoundView"; | |
export const RouteMap = () => ( | |
<div> | |
<Switch> | |
<Route component={NotFoundView} /> | |
</Switch> | |
</div> | |
); |
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 { Action } from "redux"; | |
import { | |
ExampleActionTypes, | |
} from "../actions/exampleActions"; | |
export interface ExampleState { | |
example: string[]; | |
} | |
export default function reducer( | |
state: ExampleState = { | |
example: [], | |
}, | |
action: ExampleActionTypes, | |
): ExampleState { | |
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
import { applyMiddleware, combineReducers, compose, createStore } from "redux"; | |
import thunk from "redux-thunk"; | |
import { default as example, ExampleState } from "./exampleStore"; | |
// | |
// Store interfaces | |
// | |
// The interfaces may be used by reducers to help enforce type safety. | |
// They may also be used by components that have state mappers that | |
// subscribe to store changes. | |
// | |
export interface StoreState { | |
example: ExampleState; | |
} | |
const rootReducer = combineReducers<StoreState>({ | |
example, | |
}); | |
// Load initial state on the client. | |
// let preloadedState: IStoreState = {}; | |
// if (typeof window !== 'undefined') { | |
// const preloadedState = window.__PRELOADED_STATE__; | |
// } | |
// const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; | |
// const store = createStore(rootReducer, preloadedState, composeEnhancers(applyMiddleware(thunk))); | |
// const store = createStore(rootReducer, preloadedState, applyMiddleware(thunk)); | |
const store = createStore(rootReducer, applyMiddleware(thunk)); | |
// if (process.env.NODE_ENV === "development") { | |
// store.subscribe(() => | |
// // Log the state whenever the store changes. | |
// console.log(store.getState()) | |
// ); | |
// } | |
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
import * as React from "react"; | |
export default class NotFoundView extends React.Component<any, any> { | |
public render() { | |
return ( | |
<div> | |
<h2>404</h2> | |
<h3>Page not found</h3> | |
</div> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment