You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/basics/Reducers.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -4,14 +4,14 @@
4
4
5
5
## Designing the State Shape
6
6
7
-
In Redux, all state of your application is stored as a single object. It’s a good idea to think of its shape before writing any code. What’s the minimal representation of your app’s state as an object?
7
+
In Redux, all application state is stored as a single object. It’s a good idea to think of its shape before writing any code. What’s the minimal representation of your app’s state as an object?
8
8
9
9
For our todo app, we want to store two different things:
10
10
11
11
* The currently selected visibility filter;
12
12
* The actual list of todos.
13
13
14
-
You’ll often find that you need to store some data, as well as some UI state, in the state tree. This is fine, but try to keep the data separately from the UI state.
14
+
You’ll often find that you need to store some data, as well as some UI state, in the state tree. This is fine, but try to keep the data separate from the UI state.
15
15
16
16
```js
17
17
{
@@ -28,11 +28,11 @@ You’ll often find that you need to store some data, as well as some UI state,
28
28
29
29
>##### Note on Relationships
30
30
31
-
>In a more complex app, you’re going to want different entities to reference each other. We suggest that you keep your state as normalized as possible, without any nesting. Keep every entity in an object stored with an ID as a key, and use IDs to reference it from other entities, or lists. Think of the app’s state as of a database. This approach is described in [normalizr](https://github.com/gaearon/normalizr) documentation in detail. For example, keeping `todosById: { id -> todo }` and `todos: array<id>` inside the state would be a better idea in a real app, but we’re keeping the example simple.
31
+
>In a more complex app, you’re going to want different entities to reference each other. We suggest that you keep your state as normalized as possible, without any nesting. Keep every entity in an object stored with an ID as a key, and use IDs to reference it from other entities, or lists. Think of the app’s state as a database. This approach is described in [normalizr's](https://github.com/gaearon/normalizr) documentation in detail. For example, keeping `todosById: { id -> todo }` and `todos: array<id>` inside the state would be a better idea in a real app, but we’re keeping the example simple.
32
32
33
33
## Handling Actions
34
34
35
-
Now that we decided what our state object looks like, we are ready to write a reducer for it. The reducer is a pure function that takes the previous state and an action, and returns the next state.
35
+
Now that we've decided what our state object looks like, we're ready to write a reducer for it. The reducer is a pure function that takes the previous state and an action, and returns the next state.
36
36
37
37
```js
38
38
(previousState, action) => newState
@@ -95,7 +95,7 @@ function todoApp(state = initialState, action) {
95
95
96
96
Note that:
97
97
98
-
1.**We don’t mutate the `state`.** We create a copy with [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign). `Object.assign(state, ...)` is also wrong: it will mutate the first argument. You **must** supply an empty object as the first parameter. You can also enable the experimental [object spread syntax](https://github.com/sebmarkbage/ecmascript-rest-spread) proposed for ES7 to write `{ ...state, ...newState }` instead.
98
+
1.**We don’t mutate the `state`.** We create a copy with [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign). `Object.assign(state, { visibilityFilter: action.filter })` is also wrong: it will mutate the first argument. You **must** supply an empty object as the first parameter. You can also enable the experimental [object spread syntax](https://github.com/sebmarkbage/ecmascript-rest-spread) proposed for ES7 to write `{ ...state, ...newState }` instead.
99
99
100
100
2.**We return the previous `state` in the `default` case.** It’s important to return the previous `state` for any unknown action.
101
101
@@ -135,7 +135,7 @@ function todoApp(state = initialState, action) {
135
135
136
136
Just like before, we never write directly to `state` or its fields, and instead we return new objects. The new `todos` is equal to the old `todos` concatenated with a single new item at the end. The fresh todo was constructed using the data from the action.
137
137
138
-
Finally, the implementation of `COMPLETE_TODO` handler shouldn’t come as a complete surprise:
138
+
Finally, the implementation of the `COMPLETE_TODO` handler shouldn’t come as a complete surprise:
0 commit comments