davelosert

interface ApiRepository {
    getTodos(): Promise<Todo[]>;
    getTodoById(id: number): Promise<Todo>
}

class HttpApiRepository implements ApiRepository {
    getTodos() {
      return http.get('/todos');
    }
    

davelosert

import {connect} from 'react-redux';
import {TodoList} from '../components/TodoList';
import {fetchAllTodos} from '../todo-repository/fetch-todos-thunk';

const mapStateToProps = ({loading, todos}) => {
  return {
    loading,
    todos
  };
};

davelosert

import {loadingTodos, loadTodosSuccess} from '../state/todo.actions';

export const fetchAllTodos = () => 
  (dispatch, getState, todoRepository: TodoRepository) => {
    dispatch(loadingTodos());
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then(result => result.json())
      .then(todos => dispatch(loadTodosSuccess(todos)))
};

davelosert

import {Todo} from '../state/Todo';

export interface TodoRepository {
  loadAllTODOs(): Promise<Todo[]>;
}

davelosert

import {TodoRepository} from '../TodoRepository';

export const createHTTPTodoRepository = (baseURL: string): TodoRepository => {
   return {
    loadAllTODOs: () => fetch(`${baseURL}/todos`).then(result => result.json())
   }
};

davelosert

import {createHTTPTodoRepository} from './todo-repository/http/HttpTodoRepository';

const initialState = {loading: false, todos: []};
const store = createStore<TodoListState>(todo, initialState, 
  applyMiddleware(
	  thunk.withExtraArgument(createHTTPTodoRepository())
  )
);

davelosert

import {TodoRepository} from './TodoRepository';
import {loadingTodos, loadTodosSuccess} from '../state/todo.actions';
import {Todo} from '../state/Todo';

export const fetchAllTodos = () =>
  (dispatch, getState, todoRepository: TodoRepository) => {
	  dispatch(loadingTodos());
	  todoRepository.loadAllTODOs().then((todos: Todo[]) => {
	    dispatch(loadTodosSuccess(todos));
	  });

davelosert

import {Todo} from '../../state/Todo';
import {TodoRepository} from '../TodoRepository';


export const createMockTodoRepository = (): TodoRepository => ({
  loadAllTODOs: () => Promise.resolve(createMockTodos())
});

const emptyArray = Array(1000).fill(0);
const createMockTodos = () => emptyArray.map((val, index) => 

davelosert

declare var MOCK_API: boolean;

const todoRepository = MOCK_API ?  
  createMockTodoRepository() 
: createHTTPTodoRepository('https://jsonplaceholder.typicode.com');

const initialState = {loading: false, todos: []};
const store = createStore<TodoListState>(todo, initialState, 
  applyMiddleware(
	  thunk.withExtraArgument(todoRepository())

davelosert

class MyClass {
  greet: () => console.log('Hello World')
}

const myObject = {
   ...new MyClass()
}

// will throw "myObject.greet" is not a function as the greeting is on the prototype, not the acutal instantiated class object
myObject.greet()