谈谈对redux的认识

摘要:
还原是由通量演化而来的,但它与反应无关。简而言之,redux是一个简单的状态管理器。store对象用于包装动作和减速器部件。动作对象可以被视为一组指令。在使用商店之前,需要创建store.redux,以提供创建商店的createStore组件。创建存储时,需要传入reducer函数。这时,有人可能会说redux看起来很糟糕,而且它没有使用这个快。道具。是的,你是对的。到目前为止,我们只讨论了redux,没有结合react。在下一节中,我们将学习react redux插件。这完全是为react定制的。

redux是从flux演变而来,但又独立于react。简言之就是,redux是一种单纯的状态管理器。可以和react搭配,也可以和其它框架搭配。

redux有三个重要的部分组成: store, action, reducer

其中store是一个对象,action是一个对象,reducer是一个纯函数。

store对象,用于包裹action和reducer两个部分。简言之store就是一个中间桥梁,用于连接action和reducer。
action对象可以看做是一组指令的集合。比如添加一条用户信息。action必须要用一个type属性,也就是该条指令的名字。其余属性可以按需添加。
reducer是一个纯函数(纯函数概念大家可以去google,这里就不讲了),有两个参数,一个是state(当前的状态值),一个是action(操作指令)。
通过这两个参数,按照指定规则计算出一个新状态值,并返回新状态值。由于一般我们会把state定义为对象形式,所以这里最好返回也是一个对象。

在使用store之前,需要先创建一个store.
redux提供一个createStore组件用于创建store。
在创建store时需要传入reducer函数。

let action = { //定义一个指令
   type: 'ADD_TODO', //指令名字,由于指令名是一个常量,所以全部大写
   userId: 1 //其它数据
};

let reducer = function(state = {userId: 10}, action){ //两个参数分别是当前的state值和action对象
    switch(action.type){
      case 'ADD_TODO':
        return {...userId, userId: action.userId} //返回计算后的新状态
      default:
        return state;
    }
}

let store = createStore(reducer)

这样一个store就创建好了。
但是这样,没有任何用。我们说指令需要用户去发送的,不然reducer不会返回新状态。所以,我们就要手动去发送指令。

比如我们通过点击去发送:

function sendUserId(action){
     store.dispatch(action); //store通过dispatch方法去派送指令
}
<div onClick={sendUserId}>发送</div>

store通过dispatch方法去派送指令,一旦dispatch执行,reducer函数会自动执行。
到此为止,一个完整的store过程就算完成了。

谈谈对redux的认识第1张

但是,如果我们这个时候要用新状态怎么办?我们知道react是通过改变state方式来重新渲染ui的。

这个时候我们已经有了新的state了,现在就是要把新state取到,然后调用setState,就可以更新ui了。

好,知道这个逻辑后,就好办了。

store提供一个getState方法来获取新的state。不过getState不能直接去获取,需要用监听的方式来获取。store也提供了相应的监听方法。

store.subscribe(function(){
     var newState = store.getState();
     this.setState(newState);
})

到此为止,一整套状态转换就全部完成了。这时有人可能就说,redux看起来很蹩脚啊,还不如用this.props来的快。
对,你说的没错,目前为止只是单讲redux,并没有和react结合。


下一节我们再一起学习react-redux这个插件。这个是完全为react量身定制的。

免责声明:文章转载自《谈谈对redux的认识》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【WebApi系列】详解WebApi如何传递参数2019-1-29-C#-Task.Run-和-Task.Factory.StartNew-区别下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

redux入门学习

目录 Redux学习 1.用react脚手架创建一个新的项目 2.visual studio code安装simple react snippet 插件 3.然后再src目录下新建一个文件,TodoList.jsx 4.安装antd组件制作UI界面 5.使用antd制作UI界面 6.安装redux 7.创建redux中的仓库-store和reducer...

react native debugger 远程调试redux工具

react native是现在比较火的App开发技术。使用react native开发的朋友一般也会使用到facebook提出的Flux概念框架,而redux框架是使用的比较多的。 redux的一大原则是单一数据源,只存在唯一的state树,以前由于工具的缺失,react native查看不了state,刚使用redux的时候按照文档安装了chrome扩展...

React-使用总结

聊聊我对 react 的理解。 react 历史发展。 react 性能优化。 React 历史发展 Jquery 时代 在 jquery 主流的时代,web 页面开发流程是通过 ajax 获取到后端数据,然后使用 jquery 生成 jquery 更新到页面中,但是随着业务发展,我们的项目可能会越来越复杂,我们每次请求到数据,或者数据有更改的时候...

Fish-Redux 研究

由于目前的项目采用bloc方式构建,对于的复杂页面的交互处理起来代码量越来越庞大,比如带抽屉效果的地图页面,涉及到20多个bloc之间的状态传值,而bloc的很多state的转换都依赖于widget构建,对于日益庞大的widget tree,嵌套式的bloc相互订阅,不管是从新功能开发和bug的修复都非常的不方便, 从github相关评论和用户使用量来看,...

从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

转载请注明出处! 说在前面的话: 1、为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的。而且自己从零开始配置也能学到更多的东西不是么。 2、教程只配置了开发环境,并没有配置生产环境。 3、教程针对人群是有过React + Redux经验,并且想在新项目中使用TypeScript的人(...

第3章 从Flux到Redux

第3章 从Flux到Redux 3.1 Flux 单向数据流,React是用来替换Jquery的,Flux是以替换Backbone.js、Ember.js等MVC框架为主的。 actionTypes.js定义action类型; actions.js定义action构造函数,决定了这个功能模块可以接受的动作; reducer.js定义这个功能模块如何响应ac...