react.js框架Redux基础案例详解

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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 <div>
                <h2>新闻标题：{this.state.infoData.title}</h2>
                <span>点击量：{this.state.infoData.clicknum}</span>
                <p><button>修改点击量</button></p>
            </div>
        }
}

通过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是操作，表示我们组件上事件处理函数中需要它


<button onClick={this.addClick.bind(this)}>修改点击量</button>

给按钮绑定一个点击事件的函数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怎么还麻烦了，是的，一般是在业务逻辑很复杂的项目才使用的

这里写图片描述