diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md
index 5dd4827ed..7eab78ccf 100644
--- a/docs/GettingStarted.md
+++ b/docs/GettingStarted.md
@@ -1,6 +1,6 @@
# Getting Started
-[React-Redux](https://github.com/reduxjs/react-redux) is the official [React](https://reactjs.org/) binding for [Redux](https://redux.js.org/). It lets your React components read data from a Redux store, and dispatch actions to the store to update data.
+[React-Redux](https://github.com/reduxjs/react-redux) is the official [React](https://reactjs.org/) binding for [Redux](https://redux.js.org/). It lets your React components read data from a Redux store, and dispatch actions to the store to update data.
## Installation
@@ -110,180 +110,6 @@ We have implemented our React UI components as follows:
- `constants` holds the constants data for our app.
- And finally `index` renders our app to the DOM.
-You may check out the sourcecode below or check out this CodeSandbox: [Todo App UI Only](https://codesandbox.io/s/mo7p88po0j).
-
-
-Expand Code
-
-```
-// tree structure
-.
-├── components
-│ ├── AddTodo.js
-│ ├── TodoList.js
-│ ├── Todo.js
-│ └── VisibilityFilters.js
-├── TodoApp.js
-├── constants.js
-└── index.js
-```
-
-```jsx
-// TodoApp.js
-import React from "react";
-import AddTodo from "./components/AddTodo";
-import TodoList from "./components/TodoList";
-import VisibilityFilters from "./components/VisibilityFilters";
-
-export default function TodoApp() {
- return (
-
- );
-};
-
-export default VisibilityFilters;
-```
-
-```JavaScript
-// constants.js
-export const VISIBILITY_FILTERS = {
- ALL: "all",
- COMPLETED: "completed",
- INCOMPLETE: "incomplete"
-};
-```
-
-```jsx
-// index.js
-import React from "react";
-import ReactDOM from "react-dom";
-
-import TodoApp from "./TodoApp";
-
-const rootElement = document.getElementById("root");
-ReactDOM.render(, rootElement);
-```
-
-
-
**The Redux Store**
@@ -310,170 +136,7 @@ The Redux portion of the application has been set up using the [patterns recomme
- `getTodos` is slightly more complex. It takes all the `id`s from `allIds`, finds each todo in `byIds`, and returns the final array of todos
- `getTodosByVisibilityFilter` filters the todos according to the visibility filter
-Once again you may expand the code below or check out this CodeSandbox here: [Todo App (UI + Unconnected Redux)](https://codesandbox.io/s/6vwyqrpqk3).
-
-
- Expand Code
-
-```
-.
-└── redux
-├── reducers
-│ ├── index.js
-│ ├── todos.js
-│ └── visibilityFilters.js
-├── actionTypes.js
-├── actions.js
-├── selectors.js
-└── store.js
-```
-
-```JavaScript
-// redux/store.js
-import { createStore } from "redux";
-import rootReducer from "./reducers";
-
-export default createStore(rootReducer);
-```
-
-```JavaScript
-// redux/reducers/index.js
-import { combineReducers } from "redux";
-import todoList from "./todoList";
-import todoMap from "./todoMap";
-import visibilityFilter from "./visibilityFilter";
-
-export default combineReducers({ todoList, todoMap, visibilityFilter });
-```
-
-```JavaScript
-// redux/reducers/todos.js
-import { ADD_TODO, TOGGLE_TODO } from "../actionTypes";
-
-const initialState = {
- allIds: [],
- byIds: {}
-};
-
-export default function(state = initialState, action) {
- switch (action.type) {
- case ADD_TODO: {
- const { id, content } = action.payload;
- return {
- ...state,
- allIds: [...state.allIds, id],
- byIds: {
- ...state.byIds,
- [id]: {
- content,
- completed: false
- }
- }
- };
- }
- case TOGGLE_TODO: {
- const { id } = action.payload;
- return {
- ...state,
- byIds: {
- ...state.byIds,
- [id]: {
- ...state.byIds[id],
- completed: !state.byIds[id].completed
- }
- }
- };
- }
- default:
- return state;
- }
-}
-```
-
-```JavaScript
-// redux/reducers/visibilityFilter.js
-import { SET_FILTER } from "../actionTypes";
-import { VISIBILITY_FILTERS } from "../../constants";
-
-const defaultState = VISIBILITY_FILTERS.ALL;
-
-const visibilityFilter = (state = defaultState, action) => {
- switch (action.type) {
- case SET_FILTER: {
- return action.payload.filter;
- }
- default: {
- return state;
- }
- }
-};
-
-export default visibilityFilter;
-```
-
-```JavaScript
-// redux/actions.js
-import { ADD_TODO, TOGGLE_TODO, SET_FILTER } from "./actionTypes";
-
-let nextTodoId = 0;
-
-export const addTodo = content => ({
- type: ADD_TODO,
- payload: {
- id: ++nextTodoId,
- content
- }
-});
-
-export const toggleTodo = id => ({
- type: TOGGLE_TODO,
- payload: { id }
-});
-
-export const setFilter = filter => ({ type: SET_FILTER, payload: { filter } });
-```
-
-```JavaScript
-// redux/selectors.js
-import { VISIBILITY_FILTERS } from "../constants";
-
-export const getTodosState = store => store.todos;
-
-export const getTodoList = store =>
- getTodosState(store) ? getTodosState(store).allIds : [];
-
-export const getTodoById = (store, id) =>
- getTodoState(store) ? { ...getTodosState(store).byIds[id], id } : {};
-
-export const getTodos = store =>
- getTodoList(store).map(id => getTodoById(store, id));
-
-/**
- * example of a slightly more complex selector
- * select from store combining information from multiple reducers
- */
-export const getTodosByVisibilityFilter = (store, visibilityFilter) => {
- const allTodos = getTodos(store);
- switch (visibilityFilter) {
- case VISIBILITY_FILTERS.COMPLETED:
- return allTodos.filter(todo => todo.completed);
- case VISIBILITY_FILTERS.INCOMPLETE:
- return allTodos.filter(todo => !todo.completed);
- case VISIBILITY_FILTERS.ALL:
- default:
- return allTodos;
- }
-};
-```
-
-```JavaScript
-// redux/actionTypes.js
-export const ADD_TODO = "ADD_TODO";
-export const TOGGLE_TODO = "TOGGLE_TODO";
-export const SET_FILTER = "SET_FILTER";
-```
-
-
+You may check out [this CodeSandbox](https://codesandbox.io/s/6vwyqrpqk3) for the source code of the UI components and the unconnected Redux store described above.
@@ -660,7 +323,7 @@ const TodoList = // ... UI component implementation
export default connect(state => ({ todos: getTodos(state) }))(TodoList);
```
-We recommend encapsulating any complex lookups or computations of data in selector functions. In addition, you can further optimize the performance by using [Reselect](https://github.com/reduxjs/reselect) to write “memoized” selectors that can skip unnecessary work. (See [the Redux docs page on Computing Derived Data](https://redux.js.org/recipes/computingderiveddata#sharing-selectors-across-multiple-components) and the blog post [Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance](https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/) for more information on why and how to use selector functions.)
+We recommend encapsulating any complex lookups or computations of data in selector functions. In addition, you can further optimize the performance by using [Reselect](https://github.com/reduxjs/reselect) to write “memoized” selectors that can skip unnecessary work. (See [the Redux docs page on Computing Derived Data](https://redux.js.org/recipes/computingderiveddata#sharing-selectors-across-multiple-components) and the blog post [Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance](https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/) for more information on why and how to use selector functions.)
Now that our `` is connected to the store. It should receive the list of todos, map over them, and pass each todo to the `` component. `` will in turn render them to the screen. Now try adding a todo. It should come up on our todo list!