redux

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、什么情况需要redux? 1、用户的使用方式复杂 2、不同身份的用户有不同的使用方式(比如普通用户和管...
    初晨的笔记阅读 6,261评论 0 11
  • 学习必备要点: 首先弄明白,Redux在使用React开发应用时,起到什么作用——状态集中管理 弄清楚Redux是...
    贺贺v5阅读 12,900评论 10 58
  • 1.使用场景 redux虽然好,也并不是什么情况下都要使用,如果在项目中遇到一下场景,你会自发的寻找一个工具来解决...
    TingsLee阅读 4,353评论 0 0
  • React 只是 DOM 的一个抽象层,并不是 Web 应用的完整解决方案。有两个方面,它没涉及。 代码结构 组件...
    珍珠林阅读 12,624评论 3 6
  • 使用redux+react已有一段时间,刚开始使用并未深入了解其源码,最近静下心细读源码,感触颇深~ 本文主要包含...
    字节跳动技术团队阅读 5,515评论 0 5

友情链接更多精彩内容