nightspirit

import React from 'react'
import { withCounter } from './context'

const Display = ({ counter }) => <h5 className="card-title text-center">{counter.value}</h5>
const CounterDisplay = withCounter(Display)

export default CounterDisplay

nightspirit

import React from 'react'
import CounterDisplay from './CounterDisplay'
import CounterIncBtn from './CounterIncBtn'
import CounterDecBtn from './CounterDecBtn'

const CounterCard = () => (
  <div className='Counter card m-3'>
    <div className='card-body'>
      <CounterDisplay/>
      <div className='row'>

nightspirit

import React from 'react'
import { Provider } from './context'

class Counter extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      counter: {
        value: 0,

nightspirit

import { Selector } from 'testcafe'

fixture `Login`
  .page `http://localhost:3000/login`

test('Login with bad credential', async t => {
  await t
  .typeText('input[name="username"]', 'blah')
  .typeText('input[name="password"]', 'blah')
  .click('button[type="submit"]')

nightspirit

# Use ZSET (sorted set) to achieve ranking
###################################

$ ZADD item:1 100 user:1 210 user:2
$ ZADD item:1 300 user:3 350 user:4
$ ZINCRBY item:1 100 user:3

# user:3 400, user:4 350, user:2 210, user:1 100

$ ZREVRANGE item:1 0 0 

nightspirit

import { createReducer } from 'Reducers/helpers'
import merge from 'lodash-es/merge'

const initState = {
  accessToken: null,
  refreshToken: null
}

// handlers
function set (state, { accessToken, refreshToken }) {

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

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