Notes on React:

todo_app.js

class TodoApp extends Component {
  mapStateToProps: (state) => ({
    // Take a selection of the state, applying business logic to prepare it for consumption by a presentational component which is unaware of any business rules. 
    items: state.items.filter(i => i.visible)
  })
  
  mapDispatchToProps: (dispatch) => ({
    // Callbacks which interact with the rest of the app
    onClick: (id) => dispatch({type: "TOGGLE_TODO", id}),
  })
  
  render: () => {
    return (
      // TodoList is the presenter. We pass it all the prepared props. 
      <TodoList {...this.props} />
    )
  }
}

todo_list.js

const TodoList = ({items, onClick}) => 
  // Doesn't know anything about what onClick does, or why it is getting the items it's given. Just shows them. 
  <ul>
    {items.map(todo => <TodoItem key={todo.id} onClick={() => onClick(todo.id)} {...todo} />
  </ul>