moving step2-7 to bonus content

2026-01-26 14:56:42 +08:00 · 2019-03-04 11:29:05 -08:00
parent a4097d417c
commit 6a15f0f6b6
14 changed files with 16 additions and 4 deletions
--- a/bonus-servicecalls/demo/README.md
+++ b/bonus-servicecalls/demo/README.md
@@ -0,0 +1,48 @@
+# Bonus: Service calls (Demo)
+
+[Lessons](../)
+
+> Note: this step doesn't work with the live site on github.io. Clone the repo to try this step out.
+
+## `redux-thunk`: side effects inside action creators
+
+The [Redux Thunk](https://github.com/reduxjs/redux-thunk) middleware allows writing actions that make service calls.
+
+Remember those simple little action functions? They're called action creators. These little functions can be charged with superpowers to allow asynchronous side effects to happen while creating the messages. Asynchronous side effects include service calls against APIs.
+
+Action creators are a natural place to put service calls. Redux Thunk middleware passes `dispatch()` and `getState()` from the store into the action creators. This allows the action creator itself to dispatch different actions in between async side effects. Combined with the async / await syntax, coding service calls is a cinch!
+
+Most of the time, in a single-page app, we apply **optimistic UI updates**. We can update the UI before the network call completes so the UI feels more responsive.
+
+## Action creator with a thunk
+
+[What's a thunk?](https://daveceddia.com/what-is-a-thunk/) - it is a wrapper function that returns a function. What does it do? Let's find out!
+
+This action creator just returns an object:
+
+```ts
+function addTodo(label: string) {
+  return { type: 'addTodo', id: uuid(), label };
+}
+```
+
+In order for us to make service calls, we need to supercharge this with the power of `redux-thunk`
+
+```ts
+function addTodo(label: string) {
+  return async (dispatch: any, getState: () => Store) => {
+    const addAction = actions.addTodo(label);
+    const id = addAction.id;
+    dispatch(addAction);
+    await service.add(id, getState().todos[id]);
+  };
+}
+```
+
+Let's make some observations:
+
+1. The outer function has the same function signature as the previous one
+2. It returns a function that has `dispatch` and `getState` as parameters
+3. The inner function is `async` enabled, and can await on "side effects" like asynchronous service calls
+4. This inner function has the ability to dispatch additional actions because it has been passed the `dispatch()` function from the store
+5. This inner function also has access to the state tree via `getState()`
--- a/bonus-servicecalls/demo/index.html
+++ b/bonus-servicecalls/demo/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="../../assets/step.css" />
+  </head>
+  <body class="ms-Fabric">
+    <div id="markdownReadme" data-src="./README.md"></div>
+    <div id="app"></div>
+    <script src="../../assets/scripts.js"></script>
+  </body>
+</html>
--- a/bonus-servicecalls/demo/src/actions/index.ts
+++ b/bonus-servicecalls/demo/src/actions/index.ts
@@ -0,0 +1,51 @@
+import uuid from 'uuid/v4';
+import { Store } from '../store';
+import * as service from '../service';
+
+export const actions = {
+  addTodo: (label: string) => ({ type: 'addTodo', id: uuid(), label }),
+  remove: (id: string) => ({ type: 'remove', id }),
+  complete: (id: string) => ({ type: 'complete', id }),
+  clear: () => ({ type: 'clear' }),
+  setFilter: (filter: string) => ({ type: 'setFilter', filter }),
+  edit: (id: string, label: string) => ({ type: 'edit', id, label })
+};
+
+export const actionsWithService = {
+  addTodo: (label: string) => {
+    return async (dispatch: any, getState: () => Store) => {
+      const addAction = actions.addTodo(label);
+      const id = addAction.id;
+      dispatch(addAction);
+      await service.add(id, getState().todos[id]);
+    };
+  },
+
+  remove: (id: string) => {
+    return async (dispatch: any, getState: () => Store) => {
+      dispatch(actions.remove(id));
+      await service.remove(id);
+    };
+  },
+
+  complete: (id: string) => {
+    return async (dispatch: any, getState: () => Store) => {
+      dispatch(actions.complete(id));
+      await service.update(id, getState().todos[id]);
+    };
+  },
+
+  clear: () => {
+    return async (dispatch: any, getState: () => Store) => {
+      dispatch(actions.clear());
+      await service.updateAll(getState().todos);
+    };
+  },
+
+  edit: (id: string, label: string) => {
+    return async (dispatch: any, getState: () => Store) => {
+      dispatch(actions.edit(id, label));
+      await service.update(id, getState().todos[id]);
+    };
+  }
+};
--- a/bonus-servicecalls/demo/src/components/TodoApp.tsx
+++ b/bonus-servicecalls/demo/src/components/TodoApp.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Stack } from 'office-ui-fabric-react';
+import { TodoFooter } from './TodoFooter';
+import { TodoHeader } from './TodoHeader';
+import { TodoList } from './TodoList';
+
+export const TodoApp = () => {
+  return (
+    <Stack horizontalAlign="center">
+      <Stack style={{ width: 400 }} gap={25}>
+        <TodoHeader />
+        <TodoList />
+        <TodoFooter />
+      </Stack>
+    </Stack>
+  );
+};
--- a/bonus-servicecalls/demo/src/components/TodoFooter.tsx
+++ b/bonus-servicecalls/demo/src/components/TodoFooter.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { DefaultButton, Stack, Text } from 'office-ui-fabric-react';
+import { actionsWithService } from '../actions';
+import { connect } from 'react-redux';
+import { Store } from '../store';
+
+interface TodoFooterProps {
+  todos: Store['todos'];
+  clear: () => void;
+}
+
+const TodoFooter = (props: TodoFooterProps) => {
+  const { todos, clear } = props;
+
+  const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;
+
+  return (
+    <Stack horizontal horizontalAlign="space-between">
+      <Text>
+        {itemCount} item{itemCount === 1 ? '' : 's'} left
+      </Text>
+      <DefaultButton onClick={() => clear()}>Clear Completed</DefaultButton>
+    </Stack>
+  );
+};
+
+const ConnectedTodoFooter = connect(
+  (state: Store) => ({
+    todos: state.todos
+  }),
+  (dispatch: any) => ({
+    clear: () => dispatch(actionsWithService.clear())
+  })
+)(TodoFooter);
+
+export { ConnectedTodoFooter as TodoFooter };
--- a/bonus-servicecalls/demo/src/components/TodoHeader.tsx
+++ b/bonus-servicecalls/demo/src/components/TodoHeader.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';
+import { FilterTypes } from '../store';
+import { actions, actionsWithService } from '../actions';
+import { connect } from 'react-redux';
+
+interface TodoHeaderProps {
+  addTodo: (label: string) => void;
+  setFilter: (filter: FilterTypes) => void;
+}
+
+interface TodoHeaderState {
+  labelInput: string;
+}
+
+class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
+  constructor(props: TodoHeaderProps) {
+    super(props);
+    this.state = { labelInput: undefined };
+  }
+
+  render() {
+    return (
+      <Stack gap={10}>
+        <Stack horizontal horizontalAlign="center">
+          <Text variant="xxLarge">todos</Text>
+        </Stack>
+
+        <Stack horizontal gap={10}>
+          <Stack.Item grow>
+            <TextField
+              placeholder="What needs to be done?"
+              value={this.state.labelInput}
+              onChange={this.onChange}
+              styles={props => ({
+                ...(props.focused && {
+                  field: {
+                    backgroundColor: '#c7e0f4'
+                  }
+                })
+              })}
+            />
+          </Stack.Item>
+          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>
+        </Stack>
+
+        <Pivot onLinkClick={this.onFilter}>
+          <PivotItem headerText="all" />
+          <PivotItem headerText="active" />
+          <PivotItem headerText="completed" />
+        </Pivot>
+      </Stack>
+    );
+  }
+
+  private onAdd = () => {
+    this.props.addTodo(this.state.labelInput);
+    this.setState({ labelInput: undefined });
+  };
+
+  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {
+    this.setState({ labelInput: newValue });
+  };
+
+  private onFilter = (item: PivotItem) => {
+    this.props.setFilter(item.props.headerText as FilterTypes);
+  };
+}
+
+const ConnectedTodoHeader = connect(
+  state => ({}),
+  (dispatch: any) => ({
+    addTodo: label => dispatch(actionsWithService.addTodo(label)),
+    setFilter: filter => dispatch(actions.setFilter(filter))
+  })
+)(TodoHeader);
+
+export { ConnectedTodoHeader as TodoHeader };
--- a/bonus-servicecalls/demo/src/components/TodoList.tsx
+++ b/bonus-servicecalls/demo/src/components/TodoList.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Stack } from 'office-ui-fabric-react';
+import { TodoListItem } from './TodoListItem';
+import { connect } from 'react-redux';
+import { Store } from '../store';
+
+interface TodoListProps {
+  todos: Store['todos'];
+  filter: Store['filter'];
+}
+
+const TodoList = (props: TodoListProps) => {
+  const { filter, todos } = props;
+  const filteredTodos = Object.keys(todos).filter(id => {
+    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
+  });
+
+  return (
+    <Stack gap={10}>
+      {filteredTodos.map(id => (
+        <TodoListItem key={id} id={id} />
+      ))}
+    </Stack>
+  );
+};
+
+const ConnectedTodoList = connect((state: Store) => ({ ...state }))(TodoList);
+export { ConnectedTodoList as TodoList };
--- a/bonus-servicecalls/demo/src/components/TodoListItem.tsx
+++ b/bonus-servicecalls/demo/src/components/TodoListItem.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
+import { actionsWithService } from '../actions';
+import { Store } from '../store';
+import { connect } from 'react-redux';
+
+interface TodoListItemProps {
+  id: string;
+  todos: Store['todos'];
+  complete: (id: string) => void;
+  remove: (id: string) => void;
+  edit: (id: string, label: string) => void;
+}
+
+interface TodoListItemState {
+  editing: boolean;
+  editLabel: string;
+}
+
+class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {
+  constructor(props: TodoListItemProps) {
+    super(props);
+    this.state = { editing: false, editLabel: undefined };
+  }
+
+  render() {
+    const { id, todos, complete, remove } = this.props;
+
+    const item = todos[id];
+
+    return (
+      <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
+        {!this.state.editing && (
+          <>
+            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
+            <div>
+              <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />
+              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />
+            </div>
+          </>
+        )}
+
+        {this.state.editing && (
+          <Stack.Item grow>
+            <Stack horizontal gap={10}>
+              <Stack.Item grow>
+                <TextField value={this.state.editLabel} onChange={this.onChange} />
+              </Stack.Item>
+              <DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>
+            </Stack>
+          </Stack.Item>
+        )}
+      </Stack>
+    );
+  }
+
+  private onEdit = () => {
+    const { id, todos } = this.props;
+    const { label } = todos[id];
+
+    this.setState({
+      editing: true,
+      editLabel: this.state.editLabel || label
+    });
+  };
+
+  private onDoneEdit = () => {
+    this.props.edit(this.props.id, this.state.editLabel);
+    this.setState({
+      editing: false,
+      editLabel: undefined
+    });
+  };
+
+  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {
+    this.setState({ editLabel: newValue });
+  };
+}
+
+const ConnectedTodoListItem = connect(
+  (state: Store) => ({ todos: state.todos }),
+  (dispatch: any) => ({
+    complete: id => dispatch(actionsWithService.complete(id)),
+    remove: id => dispatch(actionsWithService.remove(id)),
+    edit: (id, label) => dispatch(actionsWithService.edit(id, label))
+  })
+)(TodoListItem);
+
+export { ConnectedTodoListItem as TodoListItem };
--- a/bonus-servicecalls/demo/src/index.tsx
+++ b/bonus-servicecalls/demo/src/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { reducer } from './reducers';
+import { createStore, applyMiddleware } from 'redux';
+import { TodoApp } from './components/TodoApp';
+import { Provider } from 'react-redux';
+import { initializeIcons } from '@uifabric/icons';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import thunk from 'redux-thunk';
+import * as service from './service';
+import { Store, FilterTypes } from './store';
+
+(async () => {
+  const preloadStore = {
+    todos: (await service.getAll()) as Store['todos'],
+    filter: 'all' as FilterTypes
+  };
+
+  const store = createStore(reducer, preloadStore, composeWithDevTools(applyMiddleware(thunk)));
+
+  initializeIcons();
+
+  ReactDOM.render(
+    <Provider store={store}>
+      <TodoApp />
+    </Provider>,
+    document.getElementById('app')
+  );
+})();
--- a/bonus-servicecalls/demo/src/reducers/index.ts
+++ b/bonus-servicecalls/demo/src/reducers/index.ts
@@ -0,0 +1,43 @@
+import { Store } from '../store';
+import { combineReducers } from 'redux';
+import { createReducer } from 'redux-starter-kit';
+
+export const todosReducer = createReducer<Store['todos']>(
+  {},
+  {
+    addTodo(state, action) {
+      state[action.id] = { label: action.label, completed: false };
+    },
+
+    remove(state, action) {
+      delete state[action.id];
+    },
+
+    clear(state, action) {
+      Object.keys(state).forEach(key => {
+        if (state[key].completed) {
+          delete state[key];
+        }
+      });
+    },
+
+    complete(state, action) {
+      state[action.id].completed = !state[action.id].completed;
+    },
+
+    edit(state, action) {
+      state[action.id].label = action.label;
+    }
+  }
+);
+
+export const filterReducer = createReducer<Store['filter']>('all', {
+  setFilter(state, action) {
+    return action.filter;
+  }
+});
+
+export const reducer = combineReducers({
+  todos: todosReducer,
+  filter: filterReducer
+});
--- a/bonus-servicecalls/demo/src/service/index.ts
+++ b/bonus-servicecalls/demo/src/service/index.ts
@@ -0,0 +1,48 @@
+import { TodoItem, Store } from '../store';
+const HOST = 'http://localhost:3000';
+
+export async function add(id: string, todo: TodoItem) {
+  const response = await fetch(`${HOST}/todos/${id}`, {
+    method: 'post',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(todo)
+  });
+
+  return await response.json();
+}
+
+export async function update(id: string, todo: TodoItem) {
+  const response = await fetch(`${HOST}/todos/${id}`, {
+    method: 'put',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(todo)
+  });
+
+  return await response.json();
+}
+
+export async function remove(id: string) {
+  const response = await fetch(`${HOST}/todos/${id}`, {
+    method: 'delete'
+  });
+
+  return await response.json();
+}
+
+export async function getAll() {
+  const response = await fetch(`${HOST}/todos`, {
+    method: 'get'
+  });
+
+  return await response.json();
+}
+
+export async function updateAll(todos: Store['todos']) {
+  const response = await fetch(`${HOST}/todos`, {
+    method: 'post',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(todos)
+  });
+
+  return await response.json();
+}
--- a/bonus-servicecalls/demo/src/store/index.ts
+++ b/bonus-servicecalls/demo/src/store/index.ts
@@ -0,0 +1,14 @@
+export type FilterTypes = 'all' | 'active' | 'completed';
+
+export interface TodoItem {
+  label: string;
+  completed: boolean;
+}
+
+export interface Store {
+  todos: {
+    [id: string]: TodoItem;
+  };
+
+  filter: FilterTypes;
+}