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

return (
  <StateConsumer mapState={state => ({ greeting: state.greeting })} mapDispatch={dispatch => dispatch}>
    // ...

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

Jahans3

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

  state = this.props.state;

  _dispatch = action => {

Jahans3

const logIn = (email, password) => async dispatch => {
  dispatch({ type: 'LOG_IN_REQUEST' });

  try {
    const user = api.authenticateUser(email, password);
    dispatch({ type: 'LOG_IN_SUCCESS', payload: user });
  catch (error) {
    dispatch({ type: 'LOG_IN_ERROR', payload: error });
  }
};

Jahans3

export function StateProvider ({ state: initialState, reducers, middleware, children }) {
  return (
    <StateContext.Provider value={useStateProvider({ initialState, reducers, middleware })}>
      {children}
    </StateContext.Provider>
  );
}

Jahans3

export function useStateProvider ({ initialState, reducers, middleware = [] }) {
  const [state, _dispatch] = useReducer((state, action) => {
    return reducers.reduce((state, reducer) => reducer(state, action) || state, state);
  }, initialState);

  function dispatch (action) {
    if (typeof action === 'function') {
      return action(dispatch, state);
    }

Jahans3

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