Redux入门

      随着SPA应用越来越复杂,我们的代码需要管理更多的状态。包括服务器返回的数据,缓存的数据,以及本地产生还未保存到服务器的数据。UI的状态也越来越复杂,我们需要管理active routes,selected tabs,spinners,pagination等等。

      管理这些千变万化的数据很很困难的。如果一个model可以更新另一个model,一个view可以更新一个model,这个model又更新了另一个model,结果又导致了其它view更新。在这种情况下,你已经不能知道你的app发生了什么,你已经对它失去了控制。

三、Redux的三个原则

1、唯一数据源(Single source of truth)。

    应用的所有状态被存储在唯一的strore中的一个object tree中。这个使得创建通用app变得很容易。因为你从服务器获取的数据可以在不增加额外代码的情况下序列化并结合在客户端。 单一的状态树也使得程序的调试变得简单,它可以使你在开发中保存你的应用状态,加快开发周期。传统上比较难实现的功能也变得容易,例如Undo/Redo,在你的所有状态都保存在一个object tree的情况下,这些可以很方便的实现。

2、状态只读(State is read-only)

    改变状态的唯一方法是触发一个action。这个保证了views以及网络回调函数都不能直接修改state。相反,它表达了要改变state的意图。由于所有的改变都集中处理,并且按照一个严格的顺序逐个发生,就不需要担心微妙的争用状态。由于actions仅仅是普通的对象,它们可以被日志记录,序列化,存储以及为了调试和测试的目的重复执行。

3、通过Pure functions来修改状态。

    Reducer仅仅是一个纯函数,它接收当前状态和action,返回新的状态。注意是返回新的状态,而不是修改之前的状态。你可以从一个单一的reducer开始,随着应用的增加,将其分成多个小reducer,每个reducer管理state tree中特定的部分。由于reducers仅仅是函数,你可以控制它们调用的程序,传递额外的数据,甚至重复使用它来做日常的工作,例如分页。

四、API

1、导入

    ES6: import {createStore} from 'redux'

    ES5: var createStore = Redux.createStore

2、 createStore(reducer, [preloadedState],[enhancer])

3、Store: Store并不是一个类,它只是一个有几个方法的对象。

    getState(): 返回当前state tree。

    dispatch(action): 唯一触发state改变的方法。会在当前state上调用相应的action,返回最新state,并通知改变监听器。

    subscribe(listener): 增加一个改变监听器。

    replaceReducer(nextReducer): 替换reducer。

4、combineReducers。

5、applyMiddleware。

6、bindActionCreators。

7、compose。

   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值