Skip to content

Instantly share code, notes, and snippets.

Avatar

Pochen Lin nightspirit

  • Skupos Inc.
  • United States
View GitHub Profile
@nightspirit
nightspirit / react-loadable-router.js
Created Aug 29, 2019
react-loadable + react-router
View react-loadable-router.js
import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Loadable from 'react-loadable'
const Loading = () => <div>loading...</div>
const Home = Loadable({
loader: () => import('./Home'),
loading: Loading
})
@nightspirit
nightspirit / suspense.js
Last active Aug 29, 2019
suspense - basic
View suspense.js
const MyComponent = () => (
<Suspense fallback={<div>Loading...</div>}>
<AsyncComponent />
</Suspense>
)
View SignIn.jsx
function SignIn (props) {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [pending, setPending] = useState('')
const [error, setError] = useState({})
useEffect(()=>{
if(pending) {
api.signIn(username, password)
.then(res => {
View useBreakpoints.js
import { useMemo, createContext, useContext } from 'react'
import useMedia from 'Hooks/useMedia'
export const BreakpointsContext = createContext()
// for provider
export function useBreakpoints ({
sm = 480,
md = 960,
View app2.jsx
import { BrowserRouter } from 'react-router-dom'
import Routes from 'Routes'
import { useAppReducer, AppReducerContext } from 'Hooks/useAppReducer'
export default function App () {
const appReducer = useAppReducer()
return (
<AppReducerContext.Provider value={appReducer}>
<BrowserRouter>
View Foo2.jsx
import useAppReducer from 'Hooks/useAppReducer'
export default function Foo () {
const [state, dispatch] = useAppReducer()
// can read state or dispatch action to appReducer
return (
...
)
}
View Foo.jsx
import { useContext } from 'react'
import { AppReducerContext } from 'app'
export default function Foo () {
const [state, dispatch] = useContext(AppReducerContext)
// can read state or dispatch action to appReducer
return (
...
)
}
View app.jsx
import { createContext, useReducer } from 'react'
import AppReducer from 'Reducers/AppReducer'
import { BrowserRouter } from 'react-router-dom'
import Routes from 'Routes'
export const AppReducerContext = createContext()
const initState = AppReducer()
export default function App () {
View useAppReducer.js
import { createContext, useContext, useReducer } from 'react'
import { combineReducers, persistReducer } from 'Reducers/helpers'
import TokenReducer from 'Reducers/Token'
import FeatureReducer from 'Reducers/Feature'
const AppReducer = combineReducers({
token: persistReducer({ key: 'token', storage: localStorage })(TokenReducer),
feature: persistReducer({ key: 'feature', storage: sessionStorage })(FeatureReducer)
})
View appReducer.js
import { combineReducers, persistReducer } from 'Reducers/helpers'
import TokenReducer from 'Reducers/Token'
import FeatureReducer from 'Reducers/Feature'
const AppReducer = combineReducers({
token: persistReducer({ key: 'token', storage: localStorage })(TokenReducer),
feature: persistReducer({ key: 'feature', storage: sessionStorage })(FeatureReducer)
})