nightspirit

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

const MyComponent = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <AsyncComponent />
  </Suspense>
)

nightspirit

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 => {

nightspirit

import { useMemo, createContext, useContext } from 'react'

import useMedia from 'Hooks/useMedia'

export const BreakpointsContext = createContext()

// for provider
export function useBreakpoints ({
  sm = 480,
  md = 960,

nightspirit

import useAppReducer from 'Hooks/useAppReducer'

export default function Foo () {
  const [state, dispatch] = useAppReducer()
  // can read state or dispatch action to appReducer
  return (
    ...
  )
}

nightspirit

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>

nightspirit

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)
})

nightspirit

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 (
    ...
  )
}

nightspirit

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 () {

nightspirit

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)
})