jasonleehodges

const days = ["Sunday", "Monday", "Tuesday", "Wendesday", "Thursday", "Friday", "Saturday"];

let week = {};
for (let i = 0; i < days.length; i++) {
    week[days[i]] = i;
}

// {
//   Sunday: 0,
//   Monday: 1,

jasonleehodges

const numbers: number[] = [3, 5, 7, 9, 12];

const accumulated = numbers.reduce(
    (accumulator: number, number: number) => accumulator + number,
   0);

// 36

const days = [
    "Sunday",

jasonleehodges

const numbers: number[] = [3, 5, 7, 9, 12];
let accumulator: number = 0;

numbers.forEach((number: number) => {
    accumulator += number;
});

jasonleehodges

const numbers: number[] = [3, 5, 7, 9, 12];
let accumulator: number = 0;

for (let i = 0; i < numbers.length; i++) {
    accumulator += numbers[i];
}

// 36

jasonleehodges

import React, { FC } from 'react';
import { useDataSErvice } from '../hooks';
import { useSelector } from 'react-redux';
import { selectData } from '../selectors';

export const ExampleComponent: FC = (props) => {
  const { getData } = useDataService();
  const data = useSelector(selectData);

  useEffect(() => {

jasonleehodges

import { useDispatch } from 'react-redux';
import { setData } from '../actions';

export const useDataService = () => {
  const dispatch = useDispatch();
  const getData = () => {
    fetch(url)
      .then(resp => resp.json())
      .then(data => dispatch(setData(data));
  };

jasonleehodges

// typically this lives where the provider wraps the root component
import { store } from './location-of-instantiated-store';
import { setData } from '../actions';

export const getDataWithSingletonStore = () => {
  fetch(url)
    .then(resp => resp.json())
    .then(data => store.dispatch(setData(data)));
};

jasonleehodges

import { setData } from '../actions';

export const getDataWithThunk = () => {
  return (dispatch) => {
    fetch(url)
      .then(resp => resp.json())
      .then(data => dispatch(setData(data));
  }
}

jasonleehodges

import { AnyAction, applyMiddleware, compose, createStore } from 'redux';
import combinedReducers, { RootState } from '../reducers';
import thunk, { ThunkMiddleware } from 'redux-thunk';

const devToolsCompose = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
const composeEnhancers = (devToolsCompose !== null && devToolsCompose !== undefined)
    ? devToolsCompose
    : compose;

export type ThunkWithRootState = ThunkMiddleware<RootState, AnyAction>;

jasonleehodges

import React, { FunctionComponent } from 'react';
import { useUserState, useUserDispatch } from '../../hooks/user';

export const Navigation: FunctionComponent = () => {
  const { user } = useUserState();
  const { setUser } = useUserDispatch();
  
  return (
    <div className={styles.Navigation} onClick={ setUser('me') }>
      User name: { user }