Jahans3

import React, { useState, useEffect, Component } from 'react';
import { UserAccount } from './typings';

// Example using hooks
export default function App(): React.ReactElement {
  const [users, setUsers] = useState<UserAccount[]>([]);

  useEffect(() => {
    mockApi.fetchUsers()
      .then(setUsers);

Jahans3

const Ford = {
  seats: 4,
  passengers: [{ name: 'Bobby', height: 175 }, { name: 'Shirley', height: 150 }],
  beep () {
    console.log('Beep beep')
  }
}

const FordCar = implement(Car)(Ford)

Jahans3

describe('getCar', () => {
    it('should implement the Vehicle Interface', done => {
        const someCar = CarService.getCar()

        // Ensure someCar implements Vehicle Interface
        implement(Vehicle)(someCar)

        done()
    })
})

Jahans3

export class StateProvider extends React.PureComponent {
  static defaultProps = {
    state: {},
    reducers: [],
    middleware: []
  };

  state = this.props.state;

  _dispatch = action => {

Jahans3

export class StateProvider extends Component {
  static defaultProps = {
    state: {}
  };

  state = this.props.state;

  render () {
    return (
      <Provider value={{ state: this.state, setState: this.setState.bind(this) }}>

Jahans3

export default function SomeCount () {
  return (
    <StateConsumer>
      {({ state, dispatch }) => (
        <>
          <p>
            Count: {state.count}
          </p>
          <button onClick={() => dispatch(addOne())}>
            + 1

Jahans3

export default function SomeCount () {
  return (
    <StateConsumer>
      {({ state, setState }) => (
        <>
          <p>
            Count: {state.count}
          </p>
          <button onClick={() => setState({ count: state.count + 1 })}>
            + 1

Jahans3

class ConnectState extends React.Component {
  state = {};

  static getDerivedStateFromProps ({ state, mapState = s => s }) {
    return mapState(state);
  }

  shouldComponentUpdate (nextProps, nextState) {
    return shallowCompare(this.state, nextState);
  }

Jahans3

function shallowCompare (state, nextState) {
  if ((typeof state !== 'object' || state === null || typeof nextState !== 'object' || nextState === null)) return false;

  return Object.entries(nextState).reduce((shouldUpdate, [key, value]) => state[key] !== value ? true : shouldUpdate, false);
}

Jahans3

class ConnectState extends React.Component {
  state = this.props.mapState(this.props.state);

  static getDerivedStateFromProps (nextProps, nextState) {}

  shouldComponentUpdate (nextProps) {
    if (!Object.keys(this.state).length) {
      this.setState(this.props.mapDispatch(this.props.state));
      return true;
    }