React Europe workshop

React Europe 2016 Workshop.md

This gist contains some of the exercises and (my) solutions to we did during the workshop at React Europe

counter-reducer.js

// Create a counter reducer and make the tests pass
// Bonus: Create a counters reducer that manage a
// collection of counters
const counter = () => {
 // ?
}

expect(counter(0, { type: 'INCREMENT' })).toEqual(1);
expect(counter(1, { type: 'INCREMENT' })).toEqual(2);
expect(counter(2, { type: 'DECREMENT' })).toEqual(1);
expect(counter(undefined, {})).toEqual(0);

console.log('All tests pass');

counter-reducer_solution.js

// The state of the reducer defaults to 0 if we
// don't get passed a state or an undefined state
const counter = (state = 0, action) => {
 // Switch on the type so we can handle the actions
 // we are interested in
 switch(action.type) {
   case 'INCREMENT':
     // If it's an INCREMENT action, then increment 
     // the value of the state by one
     return state + 1;
   case 'DECREMENT':
     // If it's an DECREMENT action, then decrement
     // the value of the state by one
     return state - 1;
   default:
     // We got an action that we don't know how to
     // handle, so return the state unaltered
     return state;
 }
}

counters-reducer_solution.js

// The counters reducer manages a collection of counters,
// so its default state is an empty array (i.e. it does not
// yet manage any counters).
const counters = (state = [], action) => {
  switch(action.type) {
    case 'ADD_COUNTER':
      // When we are asked to add a counter, we add it to the
      // back of the collection of counters. Note that we do
      // NOT mutate the state and `push` to the existing state,
      // rather we spread the existing counters, and add the
      // new counter at the end of the list
      return [...state, 0];
    case 'INCREMENT':
    case 'DECREMENT':
      // If we get an INCREMENT or DECREMENT action, we look at
      // the `index`-property of the action to determine which
      // of the counters the action applies to. Remember, actions
      // are only required to have a `type`-property. Other than
      // that, we can use whatever properties and fields we want
      // and need in our actions to achieve our goal.
      // Also, since we already have a reducer that knows how to
      // manage the state for a single counter, we delegate the
      // responsibility of updating the state of the counter to
      // that reducer.
      return state.map((s, i) => i === action.index ? counter(s) : s)
    default:
    	return state;
  }
}

exercise-2_create-store.js

/* 1. Create a store from a reducer using `createStore`.
 * 2. Dispatch an action from inside an click event listener using `dispatch`. 
 *    (You can just attach the listener to `document`.)
 * 3. Subscribe to state changes and render the current count by setting the `innerHTML` of the body.
 *
 * Bonus: reimplement `createStore`
 */

const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

const store = // ?

const root = document.getElementById('root');

exercise-2_create-store_bonus.js

// Re-implement `createStore`. (initial state and store enhancers omitted)
const createStore = (reducer) => {
  // Keep track of our current state
  let state;
  // Keep track of the listeners subscribed to the store
  let listeners = [];
  
  // Allow users to query the store for the current state
  const getState = () => state;
  
  // Expose dispatch as the only way to update the state
  // (Ignore the fact that the state can be mutated by
  // calling `getState()` and mutate the returned state)
  const dispatch = (action) => {
    // Run the reducer for the current state with the
    // provided action, and set the return value as the
    // new state
    state = reducer(state, action);
    // Notify each subscriber that a state update has occured
    listeners.forEach(l => l());
  };
  
  // Allow users to subscribe to state changes
  const subscribe = (listener) => {
    // Add the listener to the list of listeners. Note that we
    // mutate our listeners array here. But since it is only
    // used internally, it doesn't really matter.
    listeners.push(listener);
    // Return a function that allows the listener to unsubscribe
    return () => {
      listeners = listeners.filter(l => l !== listener);
    };
  }
  
  // Dispatch an initial action to get the state initialized
  dispatch({ type: '@@INIT_ACTION' });
  
  // Expose the public API to consumers
  return {
    getState,
    dispatch,
    subscribe,
  };
}

exercise-2_create-store_solution.js

// Usually, we'd `import { createStore } from 'redux'`, but since
// JSFiddle has Redux loaded as a UMD-module, it is exposed as the
// global `Redux`.
const { createStore } = Redux;
// 1. Create the store using our `counter`-reducer
const store = createStore(counter);
// 2. In our click handler we just dispatch an `INCREMENT`-action
const clickHandler = () => store.dispatch({
  type: 'INCREMENT',
});
// Setup a listener to call our click handler whenever the document
// is clicked
document.addEventListener('click', clickHandler);

// Get a reference to the root element of our app (In JSFiddle this
// was supplied in the HTML-tab as a div with id="root"
const root = document.getElementById('root');
// A naïve render function that just sets the innerHTML of our root
// element to the current state of our store.
const render = () => root.innerHTML = store.getState();
// 3. Subscribe to the store, so each change of our state gets rendered
store.subscribe(render);
// Perform an initial render to get the app started
render();

exercise-3_add-react.js

/* 1. Remove the click listener on the document
 * 2. Create a <Counter>-component that can render a counter.
 *   2.1. The counter should have buttons for increasing and
 *        decreasing the value of the counter
 *   2.2. Clicking on the buttons should dispatch a corresponding
 *        action to the store
 * 2. Render the counter using your <Counter>-component
 * 3. Subscribe to the store and re-render the <Counter>-component
 *    when the store's state changes
 *
 * Bonus: 
 *  - Create a component that manages a collection of counters
 *  - Add a button for adding new counters
 *  - Each counter can be updated individually    
 */
const { createStore } = Redux;

const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

const store = createStore(counter);
const root = document.getElementById('root');

document.addEventListener('click', () => {
  store.dispatch({ type: 'INCREMENT' });
});

const render = () => {
  root.innerHTML = store.getState().toString();
}

store.subscribe(render);
render();

exercise-3_add-react_bonus-solution.js

const store = createStore(counters);

// The custom `<Button>`-component is not strictly necessary,
// but by having a custom component for the button we make it
// much easier to customize and theme buttons throughout our
// React application
const Button = (props) => (
  <button {...props}>{props.children}</button>
);

// The `<Counter>`-component hasn't changed. A counter still
// works as before (OK, it has changed. It now renders the buttons 
// using our custom `<Button>`-component. But functionality-wise
// it is identical to the previous `<Counter>`)
const Counter = ({ value, onIncrement, onDecrement }) => (
  <div>
    <h1>{value}</h1>
    <Button onClick={onIncrement}>+</Button>
    <Button onClick={onDecrement}>-</Button>
  </div>
);

// Our new `<Counters>`-component take an array of counters and callbacks
// for when the user interacts with a counter or requests a new counter.
// When the user interacts with a counter we now call `onIncrement` and
// `onDecrement` with the index of the counter that the user interacted
// with. This allows us to pass this index on in our actions, which is
// then used by the reducer to update the state of the correct counter
const Counters = ({ counters, onIncrement, onDecrement, addCounter }) => (
  <div>
    <Button onClick={addCounter}>Add counter</Button>
    {counters.map((counter, i) => (
      <Counter 
        key={i}
        value={counter}
        onIncrement={() => onIncrement(i)}
        onDecrement={() => onDecrement(i)}
      />
    ))}
  </div>
);

// Not much has changed in the `render`-function. We now create
// an extra callback that dispatches the `ADD_COUNTER`-action
// when the user clicks the "Add counter"-button. Additionally,
// we pass the index provided by as an argument to `onIncrement`
// and `onDecrement` in our actions.
const render = () => {
  ReactDOM.render(
    <Counters counters={store.getState()}
      onIncrement={(index) => {
        store.dispatch({ type: 'INCREMENT', index });
      }}
      onDecrement={(index) => {
        store.dispatch({ type: 'DECREMENT', index });
      }}
      addCounter={() => {
        store.dispatch({ type: 'ADD_COUNTER' });
      }}
    />, 
    document.getElementById('root')
  );
}

store.subscribe(render);
render();

exercise-3_add-react_solution.js

// We use a stateless functional to create our Counter, since
// we do not need any state or lifecycle hooks.
// As props we take the value of the counter, as well as
// callback for when the increment or decrement buttons are
// clicked.
const Counter = ({ value, onIncrement, onDecrement }) => (
  <div>
    <h1>{value}</h1>
    <button onClick={onIncrement}>
      +
    </button>
    <button onClick={onDecrement}>
      -
    </button>
  </div>
);

// Now just replace the contents of our `render`-function to
// utilize ReactDOM. For `onIncrement` and `onDecrement` we 
// pass arrow functions that dispatch actions to our store
const render = () => {
	ReactDOM.render(
  	<Counter
    	value={store.getState()}
      onIncrement={() => {
      	store.dispatch({ type: 'INCREMENT' });
      }}
      onDecrement={() => {
      	store.dispatch({ type: 'DECREMENT' });
      }}
    />,
    root
   );
}
// We need to still subscribe to the store to ensure that our
// UI reflects the state of our app
store.subscribe(render);
// Finally, we still call `render` to get something rendered into
// our document
render();

exercise-4_todo-list-reducer.js

(function() {
  'use strict';
  
  /* Write a todo list reducer
   * ADD_ACTION adds a todo with `id`, `text`, and `completed`
   * TOGGLE_TODO toggles a todo's `completed` field
   * Don't mutate the state!
   * Use tests to verify.
   */

  const todos = (state = [], action) => {
    // ?
  };
  
  /* Tests */
  const testAddTodo = () => {
    const stateBefore = [];
    const action = {
      type: 'ADD_TODO',
      id: 0,
      text: 'Learn Redux'
    };
    const stateAfter = [
      {
        id: 0,
        text: 'Learn Redux',
        completed: false
      }
    ];

    deepFreeze(stateBefore);
    deepFreeze(action);

    expect(todos(stateBefore, action)).toEqual(stateAfter);
  };

  const testToggleTodo = () => {
    const stateBefore = [
      {
        id: 0,
        text: 'Learn Redux',
        completed: false
      },
      {
        id: 1,
        text: 'Go shopping',
        completed: false
      }
    ];
    const action = {
      type: 'TOGGLE_TODO',
      id: 1
    };
    const stateAfter = [
      {
        id: 0,
        text: 'Learn Redux',
        completed: false
      },
      {
        id: 1,
        text: 'Go shopping',
        completed: true
      }
    ];

    deepFreeze(stateBefore);
    deepFreeze(action);

    expect(todos(stateBefore, action)).toEqual(stateAfter);
  };

  testAddTodo();
  testToggleTodo();
  console.log('All tests passed.');
})();

exercise-4_todo-list-reducer_solution.js

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      // Return a new array with the contents of the previous state,
      // and with the new todo item added last
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false,
        }
      ];
    case 'TOGGLE_TODO':
      // `Array.map` ensures we create a new array
      return state.map((todo) => {
        // If the id of the todo item is not affected, just
        // return the todo item unaltered. As long as we never
        // mutate objects, sharing references is great! We save
        // memory and work by not having to create a copy of the
        // todo item in the new state
        if (todo.id !== action.id) {
          return todo;
        }
        // However, if this IS the affected todo item, we need to
        // shallowly copy it in order to preserve the todo item in
        // the previous state. Remember, NO mutations!
        // In the new object we overwrite the `completed`-field by
        // negating the previous value.
        return {
          ...todo,
          completed: !todo.completed,
        };
      });
    default:
      return state;
  }
};

exercise-5.js

/**
 * Split the `todo` reducer out of the `todos` reducer.
 *
 * The `todo` reducer would contain the logic for how an individual todo
 * is added and updated, and the `todos` reducer would contain the logic
 * for adding and mapping items in the array.
 *
 * Make sure the tests still pass after the refactoring.
 */
const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ];
    case 'TOGGLE_TODO':
      return state.map(todo => {
        if (todo.id !== action.id) {
          return todo;
        }
        return {
          ...todo,
          completed: !todo.completed
        };
      });
    default:
      return state;
  }
};

const testAddTodo = () => {
  const stateBefore = [];
  const action = {
    type: 'ADD_TODO',
    id: 0,
    text: 'Learn Redux'
  };
  const stateAfter = [
    {
      id: 0,
      text: 'Learn Redux',
      completed: false
    }
  ];
  deepFreeze(stateBefore);
  deepFreeze(action);
  expect(todos(stateBefore, action)).toEqual(stateAfter);
};

const testToggleTodo = () => {
  const stateBefore = [
    {
      id: 0,
      text: 'Learn Redux',
      completed: false
    },
    {
      id: 1,
      text: 'Go shopping',
      completed: false
    }
  ];
  const action = {
    type: 'TOGGLE_TODO',
    id: 1
  };
  const stateAfter = [
    {
      id: 0,
      text: 'Learn Redux',
      completed: false
    },
    {
      id: 1,
      text: 'Go shopping',
      completed: true
    }
  ];
  deepFreeze(stateBefore);
  deepFreeze(action);
  expect(todos(stateBefore, action)).toEqual(stateAfter);
};

testAddTodo();
testToggleTodo();
console.log('All tests passed.');

exercise-5_solution.js

/* 
 * The todo reducer manages a single todo item. This means that
 * we can't really have a default state. In order to create the
 * default state we need to handle the "ADD_TODO" action. Thus,
 * our default state is `undefined` and we do not declare a
 * default value for the state.
 */
const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      // In `ADD_TODO` we can set up our default state.
      // We just return a new todo item with the values
      // provided in the action, as well as the `completed` 
      // field set to false
      return {
        id: action.id,
        text: action.text,
        completed: false
      };
    case 'TOGGLE_TODO':
      // Check if this action applies to the todo item
      // we are managing. If it does not, return the current
      // state unaltered.
      if (state.id !== action.id) {
        return state;
      }

      // This action applies to the todo item managed by our
      // reducer, so create a copy of the state and overwrite
      // the `completed`-field by inverting it.
      return {
        ...state,
        completed: !state.completed
      };
    default:
      // This is an unknown action for the todo item we're
      // managing, so return the todo item unaltered.
      return state;
  }
};

/*
 * After extracting the logic for how to handle a single todo item
 * into its own reducer, we can simply delegate to that reducer for
 * each todo item. Thus, the only code that remains in the 
 * todos-reducer is how to manage the collection of todo items.
 */
const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, todo(undefined, action)];
    case 'TOGGLE_TODO':
      return state.map(t => todo(t, action));
    default:
      return state;
  }
};

exercise-6.js

/* Create a `visibilityFilter` reducer that holds
 * the current filter. It's just a string.
 *
 * Using `combineReducers`, create a root reducer
 * `todoApp` that composes the `todo` reducer and
 * the `visibilityFilter` reducer.
 *
 * Optional: implement the root reducer manually.
 *
 * Optional: implement `combineReducers`.
 */
const todo = // Identical to solition for exercise 5
const todos = // Identical to solution for exercise 5
const { createStore, combineReducers } = Redux;

const visibilityFilter = (
  state = 'SHOW_ALL',
  action
) => {
  // ?
};

const todoApp = // ?

const store = createStore(todoApp);

const testAddTodo = () => {
  const stateBefore = {
    todos: [],
    visibilityFilter: 'SHOW_ALL'
  };
  const action = {
    type: 'ADD_TODO',
    id: 0,
    text: 'Learn Redux'
  };
  const stateAfter = {
    todos: [{
      id: 0,
      text: 'Learn Redux',
      completed: false
    }],
    visibilityFilter: 'SHOW_ALL'
  };
  deepFreeze(stateBefore);
  deepFreeze(action);
  expect(todoApp(stateBefore, action)).toEqual(stateAfter);
};

const testToggleTodo = () => {
  const stateBefore = {
    todos: [{
      id: 0,
      text: 'Learn Redux',
      completed: false
    }, {
      id: 1,
      text: 'Go shopping',
      completed: false
    }],
    visibilityFilter: 'SHOW_ALL'
  };
  const action = {
    type: 'TOGGLE_TODO',
    id: 1
  };
  const stateAfter = {
    todos: [{
      id: 0,
      text: 'Learn Redux',
      completed: false
    }, {
      id: 1,
      text: 'Go shopping',
      completed: true
    }],
    visibilityFilter: 'SHOW_ALL'
  };
  deepFreeze(stateBefore);
  deepFreeze(action);
  expect(todoApp(stateBefore, action)).toEqual(stateAfter);
};

const testSetVisibilityFilter = () => {
  const stateBefore = {
    todos: [],
    visibilityFilter: 'SHOW_ALL'
  };
  const action = {
    type: 'SET_VISIBILITY_FILTER',
    filter: 'SHOW_COMPLETED'
  };
  const stateAfter = {
    todos: [],
    visibilityFilter: 'SHOW_COMPLETED'
  };
  deepFreeze(stateBefore);
  deepFreeze(action);
  expect(todoApp(stateBefore, action)).toEqual(stateAfter);
};

testAddTodo();
testToggleTodo();
testSetVisibilityFilter();
console.log('All tests passed.');

exercise-6_implement-combine-reducers_solution.js

/* combineReducers take an object where each key becomes the
 * key in the resulting state and each entry is the reducer
 * that manage that specific slice of the state.
 */
function combineReducers(reducerMap) {
  // Since we're paranoid, and want to ensure that we do not
  // change the shape of our state if `reducerMap` would be
  // mutated outside this function, we create a copy of the
  // keys and reducers at the time the function is called
  const keys = Object.keys(reducerMap);
  const reducers = Object.values(reducerMap);
  // Return a new reducer
  return (state = {}, action) => {
    // For each action we get, we create a fresh new state
    const nextState = {};
    // Then we iterate over the shape of our state, the keys
    keys.forEach(key => {
      // For each slice of the state, retrieve the reducer for
      // that slice
      const reducer = reducers[key];
      // Then find the current state for that slice
      const stateManagedByReducer = state[key];
      // Finally, delegate to our reducer to create the next
      // state for this slice.
      nextState[key] = reducer(stateManagedByReducer, action);
    });
    // We're done, so return the new state!
    return nextState;
  }
}

exercise-6_implement-root-reducer_solution.js

const rootReducer = (state = {}, action) => ({
  todos: todos(state.todos, action),
  visibilityFilter: visibilityFilter(state.visibilityFilter, action),
})

exercise-6_solution.js

/* The visibility filter reducer is  very simple. We handle
 * only a single action, and the state we manage is a string.
 * Strings are immutable in JS, so we can simply return the
 * filter provided to us in the filter action and be certain
 * that the reference won't be modified by some other code.
 *
 * As always, unknown actions returns the state unaltered.
 */
const visibilityFilter = (
  state = 'SHOW_ALL',
  action
) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
    	return action.filter;
  	default:
    	return state;
  }
};
// `combineReducers` is exposed by Redux as
// a top level named export.
const { combineReducers } = Redux;
// Compose our `todos` and `visibilityFilter`
// reducers by passing them to combineReducers
const todoApp = combineReducers({
 	todos,
  visibilityFilter
});

exercise-7.js

/*
 * We want to implement the following components:
 * - `FilterLink` displays a link for a visibility filter.
 * - `Footer` displays three `FilterLink`s.
 * - `Todo` displays a single todo.
 * - `TodoList` displays a list of todos.
 * - `AddTodo` displays an input with a button.
 * - `TodoApp` renders `AddTodo`, `TodoList`, and a `Footer`, and
 *    passes functions that dispatch actions as callback props to them.
 * The component structure and their props are outlined below, 
 * but you will write the implementation!
 */

const { Component } = React;

const FilterLink = ({
  filter,
  currentFilter,
  children,
  onClick
}) => {
  // If currentFilter is the same as filter,
  // return a span. Otherwise return a link
  // that calls onClick when it's clicked.
  // ?
};

const Footer = ({
  visibilityFilter,
  onFilterClick
}) => (
  // Render a FilterLink for each
  // of the filters (all, active, completed).
  // ?
);

const Todo = ({
  onClick,
  completed,
  text
}) => (
  // Render a single todo.
  // ?
);

const TodoList = ({
  todos,
  onTodoClick
}) => (
  // Render an array of todos.
  // ?
);

const AddTodo = ({
  onAddClick
}) => {
  // Render an input field with a button.
  // return ?
};

const getVisibleTodos = (
  todos,
  filter
) => {
  // Return filtered todos.
  // You probably want to `switch` and `return`
  // inside `case`s depending on the `filter`.
}

let nextTodoId = 0;
const TodoApp = ({
  todos,
  visibilityFilter
}) => (
  // Render the form, a list of todos, and a footer.
  // Pass callback props to dispatch Redux actions!
  // ?
);

const render = () => {
  ReactDOM.render(
    <TodoApp
      {...store.getState()}
    />,
    document.getElementById('root')
  );
};

store.subscribe(render);
render();

exercise-7_solution.js

const FilterLink = ({
  filter,
  currentFilter,
  children,
  onClick
}) => {
  // If currentFilter is the same as filter,
  // return a span. Otherwise return a link
  // that calls onClick when it's clicked.
  if (filter === currentFilter) {
    return (
      <span>{children}</span>
    );
  } else {
    return (
      <a href="#" onClick={(e) => { e.preventDefault(); onClick();}}>
        {children}
      </a>
    );
  }
};

// Render a FilterLink for each
// of the filters (all, active, completed).
const Footer = ({
  visibilityFilter,
  onFilterClick
}) => (
  <p>
    Show:
    {' '}
    <FilterLink
      filter='SHOW_ALL'
      currentFilter={visibilityFilter}
      onClick={() => onFilterClick('SHOW_ALL')}
    >
      All
    </FilterLink>
    {', '}
    <FilterLink
      filter='SHOW_ACTIVE'
      currentFilter={visibilityFilter}
      onClick={() => onFilterClick('SHOW_ACTIVE')}
    >
      Active
    </FilterLink>
    {', '}
    <FilterLink
      filter='SHOW_COMPLETED'
      currentFilter={visibilityFilter}
      onClick={() => onFilterClick('SHOW_COMPLETED')}
    >
      Completed
    </FilterLink>
  </p>
);

// Render a single todo.
const Todo = ({
  onClick,
  completed,
  text
}) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
);

// Render an array of todos.
const TodoList = ({
  todos,
  onTodoClick
}) => (
  <ul>
    {
      todos.map(todo => (
        <Todo
          key={todo.id}
          {...todo}
          onClick={ () => onTodoClick(todo.id) }
        />
      ))
    }
  </ul>
);

// Render an input field with a button.
const AddTodo = ({
  onAddClick
}) => {
  let node;

  return (
    <div>
      <input ref={inputNode => 
      	node = inputNode}
      />
      <button
        onClick={() => {
          onAddClick(node.value);
          node.value = '';
        }}
      >
        Add
      </button>
    </div>
  );
};

const getVisibleTodos = (
  todos,
  filter
) => {
  // Return filtered todos.
  // You probably want to `switch` and `return`
  // inside `case`s depending on the `filter`.
  switch (filter) {
    case 'SHOW_ALL':
      return todos;
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed);
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed);
    default:
      throw new Error(`Bad filter value "${filter}"`);
  }
}

// Render the form, a list of todos, and a footer.
// Pass callback props to dispatch Redux actions!
let nextTodoId = 0;
const TodoApp = ({
  todos,
  visibilityFilter,
  onAddClick,
  onTodoClick,
  onFilterClick
}) => (
  <div>
    <AddTodo
      onAddClick={onAddClick}
    />
    <TodoList
      todos={getVisibleTodos(todos, visibilityFilter)}
      onTodoClick={onTodoClick}
    />
    <Footer
      visibilityFilter={visibilityFilter}
      onFilterClick={onFilterClick}
    />
  </div>
);

exercise-8.js

/* Now we will introduct React Redux's `connect()`
 * 
 * Rather than using a single subscription at the root of the app,
 * we will use multiple subscriptions, using container components.
 *
 * - Divide FilterLink into Link and a connected FilterLink.
 * - Create VisibleTodoList by connecting TodoList
 * - Create ConnectedAddTodo by connecting AddTodo and use
 *   `dispatch` in the click handler to add new todo items
 * - Remove the top level subscription to the store
 */
 
// [...] Code identical to the solution of Exercise 7.

exercise-8_connect-add-todo_solution.js

/**
 * We can also connect without any arguments. This type
 * of connected component gets `dispatch` injected into
 * its props, and we can then use it as we see fit.
 * So in this version of `AddTodo` we utilize `dispatch`
 * in the `onClick`-handler of the `<button>` we render
 * to dispatch an action to the Redux store.
 */
let nextTodoId = 0;
const AddTodo = ({
  dispatch
}) => {
  let input;

  return (
    <div>
      <input ref={node => {
        input = node;
      }} />
      <button onClick={() => {
        dispatch({
          type: 'ADD_TODO',
          id: nextTodoId++,
          text: input.value
        })
        input.value = '';
      }}>
        Add Todo
      </button>
    </div>
  );
};

const ConnectedAddTodo = connect()(AddTodo);

exercise-8_connect-todo-list_solution.js

/* Utility function to ensure we show the right todo items.
 * This is actually an example of a selector function. If we
 * would change the `todos` argument into `state, and co-locate
 * it with the `todos`-reducer, it would be a perfect fit!
 * However, we are still just on day 1 of the workshop, so we
 * won't do that for now.
 */
const getVisibleTodos = (
  todos,
  filter
) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos;
    case 'SHOW_COMPLETED':
      return todos.filter(
        t => t.completed
      );
    case 'SHOW_ACTIVE':
      return todos.filter(
        t => !t.completed
      );
  }
}

/* Our TodoList does not need to change in this exercise. It
 * still takes the todo items to show and a callback that is
 * invoked whenever one of the todo items is clicked.
 *
 * Also note the syntax when we map over the todo items and
 * render each todo item. We spread over the `todo`-object and
 * pass them as props to `<Todo>`. But since it does not contain
 * a `onClick`-prop, we create it explicitly and pass it down as
 * well.
 */
const TodoList = ({
  todos,
  onTodoClick
}) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
);

/* In our `mapStateToProps`-function, all the information that we
 * need to create the `todos`-prop for `<TodoList>` is in the
 * Redux-store. Thus we can omit the `ownProps`-argument.
 * Additionally, we use destructuring to directly get at the
 * `todos` and `visibilityFilter` of the state.
 * 
 */
const mapStateToTodoListProps = ({ todos, visibilityFilter }) => {
  return {
    todos: getVisibleTodos(todos, visibilityFilter)
  };
};

/* In our `mapDispatchToProps`-argument, we make use of the
 * second option for that argument. If we pass an object, then all
 * functions in that object is assumed to be action creators and
 * they are automatically wrapped in `dispatch`. Like before, the
 * keys of the object corresponds to the name of the property we
 * want injected. In our case, `<TodoList>` wants an `onTodoClick`-
 * property, so that's what we name the key.
 */
const mapDispatchToTodoListProps = {
  onTodoClick: (id) => ({
    type: 'TOGGLE_TODO',
    id
  })
};

/* Connect using the mapping functions above, and save the 
 * resulting component in VisibleTodoList.
 */
const VisibleTodoList = connect(
  mapStateToTodoListProps,
  mapDispatchToTodoListProps
)(TodoList);

exercise-8_solution.js

/* Since `FilterLink` now can decide whether it is active
 * or not we only need to pass `filter` as a prop. This
 * is what our updated `Footer` looks like:
 */
const Footer = () => (
  <p>
    Show:
    {' '}
    <FilterLink filter='SHOW_ALL'>All</FilterLink>
    {', '}
    <FilterLink filter='SHOW_ACTIVE'>Active</FilterLink>
    {', '}
    <FilterLink filter='SHOW_COMPLETED'>Completed</FilterLink>
  </p>
);

/* We update our `TodoApp` to use the connected versions
 * of the components. Since all the child components are
 * now connected where appropriate, we no longer need to
 * take any props.
 */
const TodoApp = () => (
  <div>
    <ConnectedAddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
);

/* We wrap our `TodoApp` in a `Provider` and pass
 * the store instance to it
 */
ReactDOM.render(
  <Provider store={store}>
    <TodoApp />
  </Provider>,
  document.getElementById('root')
);

// We no longer need a top level subscription to
// the store. State updates are handled automatically
// by the connected components! Awesome!

exercise-8_split-filter-link_solution.js

/* Our new `Link`-component is purely presentational. It takes two
 * explicit props: `isActive` and `onClick` and expects the children
 * to contain the text to be rendered for this `Link`.
 * 
 * - `isActive` is a boolean that determines whether the `Link` should
 * render as an anchor tag or as a span.
 * - `onClick` is a function that is called when the `Link` is clicked
 * and `isActive` is falsy.
 */
const Link = ({
  isActive,
  children,
  onClick,
}) => {
  if (isActive) {
    return <span>{children}</span>;
  }

  return (
    <a href='#' onClick={onClick}>{children}</a>
  );
};

/* The `mapStateToProps` argument of `connect` gets passed two arguments,
 * the state of the Redux store, and the own props of the connected
 * component. The function is then supposed to return an object where
 * the keys maps to the prop names to be injected, and the values are
 * the values of the respective prop.
 * In our case, we want to map the `visibilityFilter` in the Redux state
 * and the `filter` of our component into the `isActive`-prop of `<Link>`.
 */
const mapStateToLinkProps = ({ visibilityFilter }, { filter }) => ({
  isActive: visibilityFilter === filter,
});
/* The `matchDispatchToProps` argument of `connect` is an optional
 * argument that we can use to bind callbacks and action creators to a 
 * certain dispatch function. In this example, we use the function signature
 * to decide ourselves how to make use of `dispatch`. The function receives
 * the `dispatch` function and the own props of the component and is
 * expected to return an object that will be merged into the props.
 * In our case, we want to create a callback that dispatches an action
 * to change the `visibilityFilter` in the Redux store when called. We
 * map this callback to the `onClick`-prop of `<Link>`.
 * 
 */
const mapDispatchToLinkProps = (dispatch, { filter }) => {
  return {
    onClick(e) {
      e.preventDefault();
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter
      });
    }
  };
};
/* Finally, we make us of `connect` and the mapping functions to wrap
 * `<Link>` in a HoC (Higher-order Component) that is subscribed to the
 * Redux store and handles state updates for us.
 *
 */
const FilterLink = connect(
  mapStateToLinkProps,
  mapDispatchToLinkProps
)(Link);