redux

作者: 江疏影子 | 来源:发表于2018-07-18 21:00 被阅读0次

1.Store 存放数据的地方,可以看成一个容器,整个应用只有一个Store,Redux提供了一个createStore函数来生成Store。

2.State 对象包含所有数据。如果想要获取,可以通过store.getState()来获取。

3.Action State的变化,会导致View的变化,但是用户只能通过View来改变‘状态’,所以State的变化必须是View导致的,而Action的作用就是View发出的通知,表示State应该要发生变化了。

Action是一个对象,其中type属性是必须的,表示Action的名称,其他属性可以自由设置

可以这样理解,Action 描述当前发生的事情。改变 State 的唯一办法,就是使用 Action。它会运送数据到 Store。

4.Action Creator 如果View要发送多少种消息,就会有多少种Action,可以定义一个函数来生成Action

addTodo函数就是一个 Action Creator。

5.store.dispatch() 是View发出Action的唯一方法

因为store是把它们联系到一起的对象,store有以下职责:

- 维持应用的 state;

- 提供 getState() 方法获取 state;

- 提供 dispatch(action) 触发reducers方法更新 state;

- 通过subscribe(listener) 注册监听器;

- 通过 subscribe(listener) 返回的函数注销监听器。

所以结合起来就可以直接写成

6.Reducer Store收到Action以后,必须给出一个新的State,这样View才会更新,这种State的计算过程就要Reducer。Reducer是一个函数,它接受Action和当前State作为参数,返回一个新的State

上面代码中,reducer函数收到名为ADD的 Action 以后,就返回一个新的 State

但在实际应用中,Reducer函数不需要像上面手动调用,store.dispatch方法会出发Reducer的自动执行,为此就需要让Store知道Reducer函数,那就是在生成Store的时候将Reducer传入createStore方法中。

以后每当store.dispatch发送过来一个新的 Action,就会自动调用 Reducer,得到新的 State。

7.纯函数 Reducer函数是一个纯函数(相同的输入就必须会有相同的输出)

纯函数是函数式编程的概念,必须遵守以下一些约束。

· 不得改写参数

· 不能调用系统 I/O 的API

· 不能调用Date.now()或者Math.random()等不纯的方法,因为每次会得到不一样的结果。

所以希望最好把 State 对象设成只读。你没法改变它,要得到新的 State,唯一办法就是生成一个新对象。这样的好处是,任何时候,与某个 View 对应的 State 总是一个不变的对象。

8.store.subscribe() Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。

可以将View的更新函数(组件的render方法或者setState)放入listener中,会实现view的自动渲染

store.subscribe方法返回一个函数,调用这个函数就可以解除监听。

let   unsubscribe=store.subscribe(()=>

        console.log(store.getState())

);

unsubscribe();

以上就是整个流程,下面是官方的流程图

首先,用户发出Action 

store.dispatch(action);

然后,Store自动调用Reducer,并且传入两个参数:当前state和收到的Action,返回新的State

let   nextState=todoApp(previousState,action);

如果State一旦有变化,Store就会调用监听函数

store.subscribe(listener);

redux中文文档网站:http://cn.redux.js.org/index.html

以下为一个redux最简单最简单最简单的一个例子,记录方便理解。

第一步:创建一个store.js

将第二步的reducer传入到createStore中

第二步:创建reducer.js

以上两步完成之后可以在我们需要测试的页面之中通过dispatch方法将action发送到reducer函数中,进行状态的更新。

以下提供一个最简单的例子:

这是目录,Component和Redux同级

首先在Redux文件夹下建立Reducer和Store,然后打算是在Home页面点击一个按钮将文本框的值传到My页面(这就是一个action),然后在Home页面dispatch出去。在reducer写好相关的数据处理,然后在My页面获取就可以了。

这是store的内容 Home页面 reducer处理 在My里面只需要获取就可以了

这就是一个无敌简单的redux

相关文章

网友评论

      本文标题:redux

      本文链接:https://www.haomeiwen.com/subject/rppapftx.html