Skip to content

Commit

Permalink
Apply prettier for markdown document (#373)
Browse files Browse the repository at this point in the history
* Apply prettier for markdown documents

- add dependencies and prettierrc

- apply prettier to format all docs

* add pre-commit hook on prettier
  • Loading branch information
froyog authored and rccoder committed Nov 14, 2018
1 parent cada96c commit bea4ba7
Show file tree
Hide file tree
Showing 71 changed files with 2,385 additions and 2,242 deletions.
3 changes: 3 additions & 0 deletions .prettierrc
@@ -0,0 +1,3 @@
semi: false
singleQuote: true
tabWidth: 2
165 changes: 82 additions & 83 deletions README.md

Large diffs are not rendered by default.

142 changes: 71 additions & 71 deletions SUMMARY.md
@@ -1,73 +1,73 @@
## 目录

* [自述](README.md)
* [介绍](/docs/introduction/README.md)
* [动机](/docs/introduction/Motivation.md)
* [核心概念](/docs/introduction/CoreConcepts.md)
* [三大原则](/docs/introduction/ThreePrinciples.md)
* [先前技术](/docs/introduction/PriorArt.md)
* [学习资源](/docs/introduction/LearningResources.md)
* [生态系统](/docs/introduction/Ecosystem.md)
* [示例](/docs/introduction/Examples.md)
* [基础](/docs/basics/README.md)
* [Action](/docs/basics/Actions.md)
* [Reducer](/docs/basics/Reducers.md)
* [Store](/docs/basics/Store.md)
* [数据流](/docs/basics/DataFlow.md)
* [搭配 React](/docs/basics/UsageWithReact.md)
* [示例:Todo List](/docs/basics/ExampleTodoList.md)
* [高级](/docs/advanced/README.md)
* [异步 Action](/docs/advanced/AsyncActions.md)
* [异步数据流](/docs/advanced/AsyncFlow.md)
* [Middleware](/docs/advanced/Middleware.md)
* [搭配 React Router](/docs/advanced/UsageWithReactRouter.md)
* [示例:Reddit API](/docs/advanced/ExampleRedditAPI.md)
* [下一步](/docs/advanced/NextSteps.md)
* [技巧](/docs/recipes/README.md)
* [配置 Store](/docs/recipes/ConfiguringYourStore.md)
* [迁移到 Redux](/docs/recipes/MigratingToRedux.md)
* [使用对象展开运算符](/docs/recipes/UsingObjectSpreadOperator.md)
* [减少样板代码](/docs/recipes/ReducingBoilerplate.md)
* [服务端渲染](/docs/recipes/ServerRendering.md)
* [编写测试](/docs/recipes/WritingTests.md)
* [计算衍生数据](/docs/recipes/ComputingDerivedData.md)
* [实现撤销重做](/docs/recipes/ImplementingUndoHistory.md)
* [子应用隔离](/docs/recipes/IsolatingSubapps.md)
* [组织 Reducer](/docs/recipes/StructuringReducers.md)
* [Reducer 基础概念](/docs/recipes/reducers/PrerequisiteConcepts.md)
* [Reducer 基础结构](/docs/recipes/reducers/BasicReducerStructure.md)
* [Reducer 逻辑拆分](/docs/recipes/reducers/SplittingReducerLogic.md)
* [Reducer 重构示例](/docs/recipes/reducers/RefactoringReducersExample.md)
* [`combineReducers` 用法](/docs/recipes/reducers/UsingCombineReducers.md)
* [`combineReducers` 进阶](/docs/recipes/reducers/BeyondCombineReducers.md)
* [State 范式化](/docs/recipes/reducers/NormalizingStateShape.md)
* [管理范式化数据](/docs/recipes/reducers/UpdatingNormalizedData.md)
* [Reducer 逻辑复用](/docs/recipes/reducers/ReusingReducerLogic.md)
* [不可变更新模式](/docs/recipes/reducers/ImmutableUpdatePatterns.md)
* [初始化 State](/docs/recipes/reducers/InitializingState.md)
* [结合 Immutable.JS 使用 Redux](/docs/recipes/UsingImmutableJS.md)
* [常见问题](/docs/FAQ.md)
* [综合](/docs/faq/General.md)
* [Reducer](/docs/faq/Reducers.md)
* [组织 State](/docs/faq/OrganizingState.md)
* [创建 Store](/docs/faq/StoreSetup.md)
* [Action](/docs/faq/Actions.md)
* [不可变数据](/docs/faq/ImmutableData.md)
* [代码结构](/docs/faq/CodeStructure.md)
* [性能](/docs/faq/Performance.md)
* [设计哲学](/docs/faq/DesignDecisions.md)
* [React Redux](/docs/faq/ReactRedux.md)
* [其它](/docs/faq/Miscellaneous.md)
* [排错](/docs/Troubleshooting.md)
* [词汇表](/docs/Glossary.md)
* [API 文档](/docs/api/README.md)
* [createStore](/docs/api/createStore.md)
* [Store](/docs/api/Store.md)
* [combineReducers](/docs/api/combineReducers.md)
* [applyMiddleware](/docs/api/applyMiddleware.md)
* [bindActionCreators](/docs/api/bindActionCreators.md)
* [compose](/docs/api/compose.md)
* [react-redux 文档](/docs/react-redux/README.md)
* [API](/docs/react-redux/api.md)
* [排错](/docs/react-redux/troubleshooting.md)
* [redux-tutorial](https://github.com/react-guide/redux-tutorial-cn)
- [自述](README.md)
- [介绍](/docs/introduction/README.md)
- [动机](/docs/introduction/Motivation.md)
- [核心概念](/docs/introduction/CoreConcepts.md)
- [三大原则](/docs/introduction/ThreePrinciples.md)
- [先前技术](/docs/introduction/PriorArt.md)
- [学习资源](/docs/introduction/LearningResources.md)
- [生态系统](/docs/introduction/Ecosystem.md)
- [示例](/docs/introduction/Examples.md)
- [基础](/docs/basics/README.md)
- [Action](/docs/basics/Actions.md)
- [Reducer](/docs/basics/Reducers.md)
- [Store](/docs/basics/Store.md)
- [数据流](/docs/basics/DataFlow.md)
- [搭配 React](/docs/basics/UsageWithReact.md)
- [示例:Todo List](/docs/basics/ExampleTodoList.md)
- [高级](/docs/advanced/README.md)
- [异步 Action](/docs/advanced/AsyncActions.md)
- [异步数据流](/docs/advanced/AsyncFlow.md)
- [Middleware](/docs/advanced/Middleware.md)
- [搭配 React Router](/docs/advanced/UsageWithReactRouter.md)
- [示例:Reddit API](/docs/advanced/ExampleRedditAPI.md)
- [下一步](/docs/advanced/NextSteps.md)
- [技巧](/docs/recipes/README.md)
- [配置 Store](/docs/recipes/ConfiguringYourStore.md)
- [迁移到 Redux](/docs/recipes/MigratingToRedux.md)
- [使用对象展开运算符](/docs/recipes/UsingObjectSpreadOperator.md)
- [减少样板代码](/docs/recipes/ReducingBoilerplate.md)
- [服务端渲染](/docs/recipes/ServerRendering.md)
- [编写测试](/docs/recipes/WritingTests.md)
- [计算衍生数据](/docs/recipes/ComputingDerivedData.md)
- [实现撤销重做](/docs/recipes/ImplementingUndoHistory.md)
- [子应用隔离](/docs/recipes/IsolatingSubapps.md)
- [组织 Reducer](/docs/recipes/StructuringReducers.md)
- [Reducer 基础概念](/docs/recipes/reducers/PrerequisiteConcepts.md)
- [Reducer 基础结构](/docs/recipes/reducers/BasicReducerStructure.md)
- [Reducer 逻辑拆分](/docs/recipes/reducers/SplittingReducerLogic.md)
- [Reducer 重构示例](/docs/recipes/reducers/RefactoringReducersExample.md)
- [`combineReducers` 用法](/docs/recipes/reducers/UsingCombineReducers.md)
- [`combineReducers` 进阶](/docs/recipes/reducers/BeyondCombineReducers.md)
- [State 范式化](/docs/recipes/reducers/NormalizingStateShape.md)
- [管理范式化数据](/docs/recipes/reducers/UpdatingNormalizedData.md)
- [Reducer 逻辑复用](/docs/recipes/reducers/ReusingReducerLogic.md)
- [不可变更新模式](/docs/recipes/reducers/ImmutableUpdatePatterns.md)
- [初始化 State](/docs/recipes/reducers/InitializingState.md)
- [结合 Immutable.JS 使用 Redux](/docs/recipes/UsingImmutableJS.md)
- [常见问题](/docs/FAQ.md)
- [综合](/docs/faq/General.md)
- [Reducer](/docs/faq/Reducers.md)
- [组织 State](/docs/faq/OrganizingState.md)
- [创建 Store](/docs/faq/StoreSetup.md)
- [Action](/docs/faq/Actions.md)
- [不可变数据](/docs/faq/ImmutableData.md)
- [代码结构](/docs/faq/CodeStructure.md)
- [性能](/docs/faq/Performance.md)
- [设计哲学](/docs/faq/DesignDecisions.md)
- [React Redux](/docs/faq/ReactRedux.md)
- [其它](/docs/faq/Miscellaneous.md)
- [排错](/docs/Troubleshooting.md)
- [词汇表](/docs/Glossary.md)
- [API 文档](/docs/api/README.md)
- [createStore](/docs/api/createStore.md)
- [Store](/docs/api/Store.md)
- [combineReducers](/docs/api/combineReducers.md)
- [applyMiddleware](/docs/api/applyMiddleware.md)
- [bindActionCreators](/docs/api/bindActionCreators.md)
- [compose](/docs/api/compose.md)
- [react-redux 文档](/docs/react-redux/README.md)
- [API](/docs/react-redux/api.md)
- [排错](/docs/react-redux/troubleshooting.md)
- [redux-tutorial](https://github.com/react-guide/redux-tutorial-cn)
6 changes: 3 additions & 3 deletions docs/FAQ.md
Expand Up @@ -12,7 +12,7 @@
- [处理 action 必须用 switch 语句吗?](/faq/Reducers#reducers-use-switch)
- **组织 State**
- [必须将所有 state 都维护在 Redux 中吗? 可以用 React 的 setState() 方法吗?](/faq/OrganizingState#organizing-state-only-redux-state)
- [可以将 store 的 state 设置为函数、promise或者其它非序列化值吗](/faq/OrganizingState#organizing-state-non-serializable)
- [可以将 store 的 state 设置为函数、promise 或者其它非序列化值吗](/faq/OrganizingState#organizing-state-non-serializable)
- [如何在 state 中组织嵌套及重复数据?](/faq/OrganizingState#organizing-state-nested-data)
- **创建 Store**
- [可以创建多个 store 吗,应该这么做吗?能在组件中直接引用 store 并使用吗?](/faq/StoreSetup#store-setup-multiple-stores)
Expand All @@ -23,7 +23,7 @@
- [是否存在 reducer 和 action 之间的一对一映射?](/faq/Actions#actions-reducer-mappings)
- [怎样表示类似 AJAX 请求的 “副作用”?为何需要 “action 创建函数”、“thunks” 以及 “middleware” 类似的东西去处理异步行为?](/faq/Actions#actions-side-effects)
- [是否应该在 action 创建函数中连续分发多个 action?](/faq/Actions#actions-multiple-actions)
- **代码结构**
- **代码结构**
- [文件结构应该是什么样?项目中该如何对 action 创建函数和 reducer 分组? selector 又该放在哪里?](/faq/CodeStructure#structure-file-structure)
- [如何将逻辑在 reducer 和 action 创建函数之间划分? “业务逻辑” 应该放在哪里?](/faq/CodeStructure#structure-business-logic)
- [为何应该使用 action 创建函数?](/docs/faq/CodeStructure.md#structure-action-creators)
Expand All @@ -39,7 +39,7 @@
- [Immutable.JS 是否值得一用?](/docs/recipes/UsingImmutableJS.md#is-immutable-js-worth-effort)
- [在 Redux 中使用 Immutable.JS 的一些最佳实践](/docs/recipes/UsingImmutableJS.md#immutable-js-best-practices)
- **代码结构**
 - [我的项目结构应该是怎么样的?在项目中应该如何组织 action 创建函数和 reducer? 选择器(selector)应该放在哪里?](/docs/faq/CodeStructure.md#structure-file-structure)
 - [我的项目结构应该是怎么样的?在项目中应该如何组织 action 创建函数和 reducer? 选择器(selector)应该放在哪里?](/docs/faq/CodeStructure.md#structure-file-structure)
- [如何分离 reducer 与 action 创建函数之间的逻辑?业务逻辑应该放在哪里?](/docs/faq/CodeStructure.md#structure-business-logic)
- [为什么需要使用 action 创建函数?](/docs/faq/CodeStructure.md#structure-action-creators)
- **性能**
Expand Down
16 changes: 8 additions & 8 deletions docs/Glossary.md
Expand Up @@ -8,7 +8,7 @@
type State = any
```

*State* (也称为 *state tree*) 是一个宽泛的概念,但是在 Redux API 中,通常是指一个唯一的 state 值,由 store 管理且由 [`getState()`](api/Store.md#getState) 方法获得。它表示了 Redux 应用的全部状态,通常为一个多层嵌套的对象。
_State_ (也称为 _state tree_) 是一个宽泛的概念,但是在 Redux API 中,通常是指一个唯一的 state 值,由 store 管理且由 [`getState()`](api/Store.md#getState) 方法获得。它表示了 Redux 应用的全部状态,通常为一个多层嵌套的对象。

约定俗成,顶层 state 或为一个对象,或像 Map 那样的键-值集合,也可以是任意的数据类型。然而你应尽可能确保 state 可以被序列化,而且不要把什么数据都放进去,导致无法轻松地把 state 转换成 JSON。

Expand All @@ -18,7 +18,7 @@ type State = any
type Action = Object
```

*Action* 是一个普通对象,用来表示即将改变 state 的意图。它是将数据放入 store 的唯一途径。无论是从 UI 事件、网络回调,还是其他诸如 WebSocket 之类的数据源所获得的数据,最终都会被 dispatch 成 action。
_Action_ 是一个普通对象,用来表示即将改变 state 的意图。它是将数据放入 store 的唯一途径。无论是从 UI 事件、网络回调,还是其他诸如 WebSocket 之类的数据源所获得的数据,最终都会被 dispatch 成 action。

约定俗成,action 必须拥有一个 `type` 域,它指明了需要被执行的 action type。Type 可以被定义为常量,然后从其他 module 导入。比起用 [Symbols](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 表示 `type`,使用 String 是更好的方法,因为 string 可以被序列化。

Expand All @@ -32,7 +32,7 @@ type Action = Object
type Reducer<S, A> = (state: S, action: A) => S
```

*Reducer* (也称为 *reducing function*) 函数接受两个参数:之前累积运算的结果和当前被累积的值,返回的是一个新的累积结果。该函数把一个集合归并成一个单值。
_Reducer_ (也称为 _reducing function_) 函数接受两个参数:之前累积运算的结果和当前被累积的值,返回的是一个新的累积结果。该函数把一个集合归并成一个单值。

Reducer 并不是 Redux 特有的函数 —— 它是函数式编程中的一个基本概念,甚至大部分的非函数式语言比如 JavaScript,都有一个内置的 reduce API。对于 JavaScript,这个 API 是 [`Array.prototype.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce).

Expand All @@ -49,7 +49,7 @@ type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any
```

*dispatching function* (或简言之 *dispatch function*) 是一个接收 action 或者[异步 action](#异步-action)的函数,该函数要么往 store 分发一个或多个 action,要么不分发任何 action。
_dispatching function_ (或简言之 _dispatch function_) 是一个接收 action 或者[异步 action](#异步-action)的函数,该函数要么往 store 分发一个或多个 action,要么不分发任何 action。

我们必须分清一般的 dispatch function 以及由 store 实例提供的没有 middleware 的 base [`dispatch`](api/Store.md#dispatch) function 之间的区别。

Expand All @@ -63,9 +63,9 @@ Base dispatch function **总是**同步地把 action 与上一次从 store 返
type ActionCreator = (...args: any) => Action | AsyncAction
```

*Action Creator* 很简单,就是一个创建 action 的函数。不要混淆 action 和 action creator 这两个概念。Action 是一个信息的负载,而 action creator 是一个创建 action 的工厂。
_Action Creator_ 很简单,就是一个创建 action 的函数。不要混淆 action 和 action creator 这两个概念。Action 是一个信息的负载,而 action creator 是一个创建 action 的工厂。

调用 action creator 只会生产 action,但不分发。你需要调用 store 的 [`dispatch`](api/Store.md#dispatch) function 才会引起变化。有时我们讲 *bound action creator*,是指一个函数调用了 action creator 并立即将结果分发给一个特定的 store 实例。
调用 action creator 只会生产 action,但不分发。你需要调用 store 的 [`dispatch`](api/Store.md#dispatch) function 才会引起变化。有时我们讲 _bound action creator_,是指一个函数调用了 action creator 并立即将结果分发给一个特定的 store 实例。

如果 action creator 需要读取当前的 state、调用 API、或引起诸如路由变化等副作用,那么它应该返回一个[异步 action](#异步-action)而不是 action。

Expand All @@ -75,9 +75,9 @@ type ActionCreator = (...args: any) => Action | AsyncAction
type AsyncAction = any
```

*异步 action* 是一个发给 dispatching 函数的值,但是这个值还不能被 reducer 消费。在发往 base [`dispatch()`](api/Store.md#dispatch) function 之前,[middleware](#middleware) 会把异步 action 转换成一个或一组 action。异步 action 可以有多种 type,这取决于你所使用的 middleware。它通常是 Promise 或者 thunk 之类的异步原生数据类型,虽然不会立即把数据传递给 reducer,但是一旦操作完成就会触发 action 的分发事件。
_异步 action_ 是一个发给 dispatching 函数的值,但是这个值还不能被 reducer 消费。在发往 base [`dispatch()`](api/Store.md#dispatch) function 之前,[middleware](#middleware) 会把异步 action 转换成一个或一组 action。异步 action 可以有多种 type,这取决于你所使用的 middleware。它通常是 Promise 或者 thunk 之类的异步原生数据类型,虽然不会立即把数据传递给 reducer,但是一旦操作完成就会触发 action 的分发事件。

## Middleware
## Middleware

```js
type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }
Expand Down
22 changes: 8 additions & 14 deletions docs/Troubleshooting.md
Expand Up @@ -69,7 +69,7 @@ function todos(state = [], action) {
```

虽然需要写更多代码,但是让 Redux 变得可具有可预测性和高效。如果你想减少代码量,你可以用一些辅助方法类似
[`React.addons.update`](https://facebook.github.io/react/docs/update.html) 来让这样的不可变转换操作变得更简单:
[`React.addons.update`](https://facebook.github.io/react/docs/update.html) 来让这样的不可变转换操作变得更简单:

```js
// 修改前
Expand Down Expand Up @@ -120,7 +120,7 @@ return state.map((todo, index) => {

注意还在实验阶段的特性会经常改变。

同时要注意那些需要复制的深层嵌套的 state 对象。而 `_.extend``Object.assign` 只能提供浅层的 state 复制。在 [更新嵌套的对象](recipes/reducers/ImmutableUpdatePatterns.md#updating-nested-objects) 章节中会教会你如何处理嵌套的 state 对象。
同时要注意那些需要复制的深层嵌套的  state 对象。而 `_.extend``Object.assign` 只能提供浅层的  state 复制。在 [更新嵌套的对象](recipes/reducers/ImmutableUpdatePatterns.md#updating-nested-objects) 章节中会教会你如何处理嵌套的  state  对象。

#### 不要忘记调用 [`dispatch(action)`](api/Store.md#dispatch)

Expand All @@ -147,11 +147,7 @@ class AddTodo extends Component {
}

render() {
return (
<button onClick={() => this.handleClick()}>
Add
</button>
)
return <button onClick={() => this.handleClick()}>Add</button>
}
}
```
Expand All @@ -170,7 +166,9 @@ handleClick() {
如果组件的层级非常深,把 store 一层层传下去很麻烦。因此 [react-redux](https://github.com/gaearon/react-redux) 提供了 `connect` 这个 [高阶组件](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750),它除了可以帮你监听 Redux store,还会把 `dispatch` 注入到组件的 props 中。

修复后的代码是这样的:

#### `AddTodo.js`

```js
import React, { Component } from 'react'
import { connect } from 'react-redux'
Expand All @@ -183,11 +181,7 @@ class AddTodo extends Component {
}

render() {
return (
<button onClick={() => this.handleClick()}>
Add
</button>
)
return <button onClick={() => this.handleClick()}>Add</button>
}
}

Expand All @@ -197,9 +191,9 @@ export default connect()(AddTodo)

如果你想的话也可以把 `dispatch` 手动传给其它组件。

#### 确保 mapStateToProps 是正确的
#### 确保  mapStateToProps  是正确的

你可能正确地 diaptching 一个 action 并且将它提到了 reducer 中,但是对应的 state 却没有通过 props 正确地传输。
你可能正确地  diaptching 一个 action  并且将它提到了  reducer  中,但是对应的  state  却没有通过  props  正确地传输。

## 其它问题

Expand Down

0 comments on commit bea4ba7

Please sign in to comment.