Redux的核心理念 - Store

Redux的核心理念非常简单。

比如我们有一个朋友列表需要管理：

如果我们没有定义统一的规范来操作这段数据，那么整个数据的变化就是无法跟踪的；

比如页面的某处通过products.push的方式增加了一条数据；

比如另一个页面通过products[0].age = 25修改了一条数据；

整个应用程序错综复杂，当出现bug时，很难跟踪到底哪里发生的变化；

Redux的核心理念 - action

Redux要求我们通过action来更新数据：

所有数据的变化，必须通过派发（dispatch）action来更新；

action是一个普通的JavaScript对象，用来描述这次更新的type和content；

比如下面就是几个更新friends的action：

强制使用action的好处是可以清晰的知道数据到底发生了什么样的变化，所有的数据变化都是可跟追、可预测的；

当然，目前我们的action是固定的对象；

真实应用中，我们会通过函数来定义，返回一个action；

Redux的核心理念 - reducer

但是如何将state和action联系在一起呢？答案就是reducer

reducer是一个纯函数；

reducer做的事情就是将传入的state和action结合起来生成一个新的state；

Redux 三大原则

单一数据源

整个应用程序的state被存储在一颗object tree中，并且这个object tree只存储在一个 store 中：

Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护；

单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改；

State是只读的

唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State：

这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改state；

这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition（竟态）的问题；

使用纯函数来执行修改

通过reducer将 旧state和 actions联系在一起，并且返回一个新的State：

随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分；

但是所有的reducer都应该是纯函数，不能产生任何的副作用；

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情