react.js框架Redux的示例分析

小编给大家分享一下react.js框架Redux的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

react.js框架Redux

https://github.com/reactjs/redux

安装：

npm install redux react-redux#基于react，我们在前面已经安装过了

Redux参考文档：
http://redux.js.org/

Redux核心概念：Store

我们可以简单的理解为就是用来存储 各个组件的State或你自己定义的独立的state，对state进行统一读取、更新、监听等操作。
http://redux.js.org/docs/basics/Store.html

Reduce

官方告诉我们redux的基本使用如下：

import {createStore} from "redux";import todoApp from "./reducers";let store = createStore(todoApp);

createStore()参数传入的是一个函数Function。
在redux里的概念叫做：Reduce
Reduce的基本形式：

function myFun(state,action){  // ...}

当然我们也可以使用esmascript 2015的箭头函数形式来定义。

实战演练

1、我们先来定义一个Reduce

InfoReduce.js：

//测试数据let info = {    title:"测试标题",    clicknum:0};// 把数据通过参数船体export  default (state = info, action)=>{    return state; //返回的就是测试数据}

2、Reduce准备完成，我们开始使用 Redux

import InfoReduce  from "./../redux/InfoReduce";import {createStore} from "redux";let store = createStore(InfoReduce);

3、Redux中很重要的概念store已经创建，我们看看在组件里如何使用？

// 定义一个名叫InfoDetail的组件class InfoDetail extends  React.Component{    // 构造      constructor(props) {        super(props);        // 初始状态        this.state = {            infoData:store.getState() //通过store对象的方法获取数据        };      }        render(){            return 
                
新闻标题：{this.state.infoData.title}
                点击量：{this.state.infoData.clicknum}                
修改点击量
            
        }}

通过store.getState()获取数据。

到这里我们基本明白了：Reducers就是规定的一种函数，它产生新的state然后传递给Store；我们的组件通过Store来获取state更新组件数据。

了解action

官方文档对action的说明：
http://redux.js.org/docs/basics/Actions.html

其实通过action这个单词我们可以猜测到是用来处理业务的操作。

在我们前面的代码中，哪里还有action？
我们定义Reducer函数的时候，第二个参数就是：

export  default (state, action)=>{}

1、既然action是操作，表示我们组件上事件处理函数中需要它

修改点击量

给按钮绑定一个点击事件的函数addClick

2、下面来看看 addClick 函数里有什么乾坤?

addClick(){            //修改state            store.dispatch({                type:"INFO_CLICK"            })            this.setState({ //更新state                infoData:store.getState()            })        }

this.setState()我们前面学过这是用来更新状态(state)；
store.dispatch()这又是我们Redux里的东东了，这个方法其实就的调度action的。
通过type来区分。

3、根据我们的需求，我们的action要处理的业务逻辑是 对clicknum增加

//测试数据let info = {    title:"测试标题",    clicknum:0};// 把数据通过参数船体export  default (state = info, action)=>{    if (action.type == "INFO_CLICK"){        let oldNum = state.clicknum;        oldNum++;        // 返回新的数据        return Object.assign({},state,{clicknum:oldNum});    }    return state; //返回的就是测试数据}

我们的Reducer函数中，通过action.type来判断，然后处理业务逻辑相关。

到这里，我们可能迷惑了，Redux怎么还麻烦了，是的，一般是在业务逻辑很复杂的项目才使用的

以上是"react.js框架Redux的示例分析"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！