Skip to content

Commit 1ad1667

Browse files
wgao19markerikson
wgao19
authored and
markerikson
committedSep 18, 2018
Remove folded sourcecode. Use one combined CodeSandbox sourecode for the UI components + unconnected Redux store code sample. (#1022)
1 parent 5876977 commit 1ad1667

File tree

1 file changed

+3
-340
lines changed

1 file changed

+3
-340
lines changed
 

‎docs/GettingStarted.md

+3-340
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Getting Started
22

3-
[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.
3+
[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.
44

55
## Installation
66

@@ -110,180 +110,6 @@ We have implemented our React UI components as follows:
110110
- `constants` holds the constants data for our app.
111111
- And finally `index` renders our app to the DOM.
112112

113-
You may check out the sourcecode below or check out this CodeSandbox: [Todo App UI Only](https://codesandbox.io/s/mo7p88po0j).
114-
115-
<details>
116-
<summary>Expand Code</summary>
117-
118-
```
119-
// tree structure
120-
.
121-
├── components
122-
│ ├── AddTodo.js
123-
│ ├── TodoList.js
124-
│ ├── Todo.js
125-
│ └── VisibilityFilters.js
126-
├── TodoApp.js
127-
├── constants.js
128-
└── index.js
129-
```
130-
131-
```jsx
132-
// TodoApp.js
133-
import React from "react";
134-
import AddTodo from "./components/AddTodo";
135-
import TodoList from "./components/TodoList";
136-
import VisibilityFilters from "./components/VisibilityFilters";
137-
138-
export default function TodoApp() {
139-
return (
140-
<div className="todo-app">
141-
<h1>Todo List</h1>
142-
<AddTodo />
143-
<TodoList />
144-
<VisibilityFilters />
145-
</div>
146-
);
147-
}
148-
```
149-
150-
```jsx
151-
// components/AddTodo.js
152-
153-
import React from "react";
154-
155-
class AddTodo extends React.Component {
156-
constructor(props) {
157-
super(props);
158-
this.state = { input: "" };
159-
}
160-
161-
updateInput = input => {
162-
this.setState({ input });
163-
};
164-
165-
handleAddTodo = () => {
166-
// dispatches actions to add todo
167-
// sets state back to empty string
168-
};
169-
170-
render() {
171-
return (
172-
<div>
173-
<input
174-
onChange={e => this.updateInput(e.target.value)}
175-
value={this.state.input}
176-
/>
177-
<button className="add-todo" onClick={this.handleAddTodo}>
178-
Add Todo
179-
</button>
180-
</div>
181-
);
182-
}
183-
}
184-
185-
export default AddTodo;
186-
```
187-
188-
```jsx
189-
// components/Todo.js
190-
191-
import React from "react";
192-
import cx from "classnames";
193-
194-
const Todo = ({ todo }) => (
195-
<li
196-
className="todo-item"
197-
onClick={() => {} /** dispatches action to toggle todo */}
198-
>
199-
{todo && todo.completed ? "👌" : "👋"}{" "}
200-
<span
201-
className={cx(
202-
"todo-item__text",
203-
todo && todo.completed && "todo-item__text--completed"
204-
)}
205-
>
206-
{todo.content}
207-
</span>
208-
</li>
209-
);
210-
211-
export default Todo;
212-
```
213-
214-
```jsx
215-
// components/TodoList.js
216-
217-
import React from "react";
218-
import Todo from "./Todo";
219-
220-
const TodoList = ({ todos }) => (
221-
<ul className="todo-list">
222-
{todos && todos.length
223-
? todos.map((todo, index) => {
224-
return <Todo key={`todo-${todo.id}`} todo={todo} />;
225-
})
226-
: "No todos, yay!"}
227-
</ul>
228-
);
229-
230-
export default TodoList;
231-
```
232-
233-
```jsx
234-
// components/VisibilityFilters.js
235-
236-
import React from "react";
237-
import cx from "classnames";
238-
import { VISIBILITY_FILTERS } from "../constants";
239-
240-
const VisibilityFilters = ({ activeFilter }) => {
241-
return (
242-
<div className="visibility-filters">
243-
{Object.keys(VISIBILITY_FILTERS).map(filterKey => {
244-
const currentFilter = VISIBILITY_FILTERS[filterKey];
245-
return (
246-
<span
247-
key={`visibility-filter-${currentFilter}`}
248-
className={cx(
249-
"filter",
250-
currentFilter === activeFilter && "filter--active"
251-
)}
252-
onClick={() => {} /** dispatches action to set filter */}
253-
>
254-
{currentFilter}
255-
</span>
256-
);
257-
})}
258-
</div>
259-
);
260-
};
261-
262-
export default VisibilityFilters;
263-
```
264-
265-
```JavaScript
266-
// constants.js
267-
export const VISIBILITY_FILTERS = {
268-
ALL: "all",
269-
COMPLETED: "completed",
270-
INCOMPLETE: "incomplete"
271-
};
272-
```
273-
274-
```jsx
275-
// index.js
276-
import React from "react";
277-
import ReactDOM from "react-dom";
278-
279-
import TodoApp from "./TodoApp";
280-
281-
const rootElement = document.getElementById("root");
282-
ReactDOM.render(<TodoApp />, rootElement);
283-
```
284-
285-
</details>
286-
287113
<br />
288114

289115
**The Redux Store**
@@ -310,170 +136,7 @@ The Redux portion of the application has been set up using the [patterns recomme
310136
- `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
311137
- `getTodosByVisibilityFilter` filters the todos according to the visibility filter
312138

313-
Once again you may expand the code below or check out this CodeSandbox here: [Todo App (UI + Unconnected Redux)](https://codesandbox.io/s/6vwyqrpqk3).
314-
315-
<details>
316-
<summary>Expand Code</summary>
317-
318-
```
319-
.
320-
└── redux
321-
├── reducers
322-
│ ├── index.js
323-
│ ├── todos.js
324-
│ └── visibilityFilters.js
325-
├── actionTypes.js
326-
├── actions.js
327-
├── selectors.js
328-
└── store.js
329-
```
330-
331-
```JavaScript
332-
// redux/store.js
333-
import { createStore } from "redux";
334-
import rootReducer from "./reducers";
335-
336-
export default createStore(rootReducer);
337-
```
338-
339-
```JavaScript
340-
// redux/reducers/index.js
341-
import { combineReducers } from "redux";
342-
import todoList from "./todoList";
343-
import todoMap from "./todoMap";
344-
import visibilityFilter from "./visibilityFilter";
345-
346-
export default combineReducers({ todoList, todoMap, visibilityFilter });
347-
```
348-
349-
```JavaScript
350-
// redux/reducers/todos.js
351-
import { ADD_TODO, TOGGLE_TODO } from "../actionTypes";
352-
353-
const initialState = {
354-
allIds: [],
355-
byIds: {}
356-
};
357-
358-
export default function(state = initialState, action) {
359-
switch (action.type) {
360-
case ADD_TODO: {
361-
const { id, content } = action.payload;
362-
return {
363-
...state,
364-
allIds: [...state.allIds, id],
365-
byIds: {
366-
...state.byIds,
367-
[id]: {
368-
content,
369-
completed: false
370-
}
371-
}
372-
};
373-
}
374-
case TOGGLE_TODO: {
375-
const { id } = action.payload;
376-
return {
377-
...state,
378-
byIds: {
379-
...state.byIds,
380-
[id]: {
381-
...state.byIds[id],
382-
completed: !state.byIds[id].completed
383-
}
384-
}
385-
};
386-
}
387-
default:
388-
return state;
389-
}
390-
}
391-
```
392-
393-
```JavaScript
394-
// redux/reducers/visibilityFilter.js
395-
import { SET_FILTER } from "../actionTypes";
396-
import { VISIBILITY_FILTERS } from "../../constants";
397-
398-
const defaultState = VISIBILITY_FILTERS.ALL;
399-
400-
const visibilityFilter = (state = defaultState, action) => {
401-
switch (action.type) {
402-
case SET_FILTER: {
403-
return action.payload.filter;
404-
}
405-
default: {
406-
return state;
407-
}
408-
}
409-
};
410-
411-
export default visibilityFilter;
412-
```
413-
414-
```JavaScript
415-
// redux/actions.js
416-
import { ADD_TODO, TOGGLE_TODO, SET_FILTER } from "./actionTypes";
417-
418-
let nextTodoId = 0;
419-
420-
export const addTodo = content => ({
421-
type: ADD_TODO,
422-
payload: {
423-
id: ++nextTodoId,
424-
content
425-
}
426-
});
427-
428-
export const toggleTodo = id => ({
429-
type: TOGGLE_TODO,
430-
payload: { id }
431-
});
432-
433-
export const setFilter = filter => ({ type: SET_FILTER, payload: { filter } });
434-
```
435-
436-
```JavaScript
437-
// redux/selectors.js
438-
import { VISIBILITY_FILTERS } from "../constants";
439-
440-
export const getTodosState = store => store.todos;
441-
442-
export const getTodoList = store =>
443-
getTodosState(store) ? getTodosState(store).allIds : [];
444-
445-
export const getTodoById = (store, id) =>
446-
getTodoState(store) ? { ...getTodosState(store).byIds[id], id } : {};
447-
448-
export const getTodos = store =>
449-
getTodoList(store).map(id => getTodoById(store, id));
450-
451-
/**
452-
* example of a slightly more complex selector
453-
* select from store combining information from multiple reducers
454-
*/
455-
export const getTodosByVisibilityFilter = (store, visibilityFilter) => {
456-
const allTodos = getTodos(store);
457-
switch (visibilityFilter) {
458-
case VISIBILITY_FILTERS.COMPLETED:
459-
return allTodos.filter(todo => todo.completed);
460-
case VISIBILITY_FILTERS.INCOMPLETE:
461-
return allTodos.filter(todo => !todo.completed);
462-
case VISIBILITY_FILTERS.ALL:
463-
default:
464-
return allTodos;
465-
}
466-
};
467-
```
468-
469-
```JavaScript
470-
// redux/actionTypes.js
471-
export const ADD_TODO = "ADD_TODO";
472-
export const TOGGLE_TODO = "TOGGLE_TODO";
473-
export const SET_FILTER = "SET_FILTER";
474-
```
475-
476-
</details>
139+
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.
477140

478141
<br />
479142

@@ -660,7 +323,7 @@ const TodoList = // ... UI component implementation
660323
export default connect(state => ({ todos: getTodos(state) }))(TodoList);
661324
```
662325

663-
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.)
326+
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.)
664327

665328
Now that our `<TodoList />` is connected to the store. It should receive the list of todos, map over them, and pass each todo to the `<Todo />` component. `<Todo />` will in turn render them to the screen. Now try adding a todo. It should come up on our todo list!
666329

0 commit comments

Comments
 (0)