创建 Store 与 Reducer

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们用一个非常简单的例子,理解一下 Redux 应用里的一些核心的概念。State,Store,Action 还有 Reducer .. 先在应用里面把 redux 里的 createStore 拿出来 .. import .. createStore from redux ..

创建一个 store .. 用一下 createStore 这个方法 .. 创建 store 的时候,要把 store 里面用的 reducer 告诉 createStore 这个方法 ..

在 reducer 里面,会根据应用指派的动作,加工生成应用里的新的 state ..

比如我们的应用是一个非常简单的计数器 ..

reducer

reducer 就是一个普通的函数 .. 名字可以叫它 counterReducer .. reducer 支持两个参数,第一个参数是应用里的 state .. 就是应用里的数据 .. 一个简单的计算数应用,它的 state 就是一个数字 .. 给它一个默认的值,让它等于 0 ..

reducer 的第二个参数是 action,就是应用上发生的动作 ..

action

在这个 reducer 里面,用一个 switch .. 判断一下 action 的 type 属性的值 .. 应用里的 action 就是一个对象,它描述了应用上面发生的一些事情 .. action 里面必须得有一个 type 属性,说明一下动作的类型,或者叫动作的名字 .. 另外你还可以带一些其它的数据 ..

比如我们的计数器应用里,有一种动作叫 INCREMENT .. 在这个 reducer 里面,添加一种情况,如果动作的类型是 INCREMENT ..

reducer 要根据这个动作,生成应用的新的 state .. 这里 return 的就是让 state 加上 1 ..

再添加一种默认的情况 .. 可以直接 return 应用的 state .. 这样如果这个 counter reducer 收到的动作,如果它不知道动作的类型,就会什么也不做,直接返回应用原来的 state ..

下面再把这里创建的这个叫 counter 的 reducer 交给创建应用的 store 用的 createStore 这个函数 ...

创建 Store 与 Reducer《 Redux:数据管理 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点