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 <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怎么还麻烦了,是的,一般是在业务逻辑很复杂的项目才使用的

到此这篇关于react.js框架Redux基础案例详解的文章就介绍到这了,更多相关react.js框架Redux基础内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 一文搞懂redux在react中的初步用法

    Redux是一个数据状态管理插件,当使用React或是vue开发组件化的SPA程序时,组件之间共享信息是一个非常大的问题.例如,用户登陆之后客户端会存储用户信息(ID,头像等),而系统的很多组件都会用到这些信息,当使用这些信息的时候,每次都重新获取一遍,这样会非常的麻烦,因此每个系统都需要一个管理多组件使用的公共信息的功能,这就是redux的作用. 如果你是从来没有接触过redux的开发者,希望您能够有耐心的看一看,我也是看好很多博客慢慢自己总结的!!!!比大佬们一个一个分布找要强一点. imp

  • 重置Redux的状态数据的方法实现

    在 Redux 使用过程中,通常需要重置 store 的状态,比如应用初始化的时候.用户退出登录的时候,这样能够避免数据残留,避免 UI 显示了上一个用户的数据,容易造成用户数据泄露. 最简单的实现方法就是为每个独立的 store 添加RESET_APP 的 action,每次需要 reset 的时候,dispatch 这个 action 即可,如下代码 const usersDefaultState = []; const users = (state = usersDefaultState,

  • 详解JavaScript状态容器Redux

    目录 一.Why Redux 二.Redux Data flow 三.Three Principles(三大原则) 四.Redux源码解析 4.1.index.js 4.2.createStore.js 4.3.combineReducers.js 4.4.bindActionCreators.js 4.5.compose.js 4.6.applyMiddleware.js 五.从零开始实现一个简单的Redux 六.Redux Devtools 七.总结 一.Why Redux 在说为什么用 R

  • redux处理异步action解决方案

    如果没有中间件,store.dispatch只能接收一个普通对象作为action.在处理异步action时,我们需要在异步回调或者promise函数then内,async函数await之后dispatch. dispatch({ type:'before-load' }) fetch('http://myapi.com/${userId}').then({ response =>dispatch({ type:'load', payload:response }) }) 这样做确实可以解决问题,

  • 深入理解redux之compose的具体应用

    应用 最近给自己的react项目添加redux的时候,用到了redux中的compose函数,使用compose来增强store,下面是我在项目中的一个应用: import {createStore,applyMiddleware,compose} from 'redux'; import createSagaMiddleware from 'redux-saga'; const sagaMiddleware = createSagaMiddleware(); const middlewares

  • 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/

  • vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • MFC框架之OnIdle案例详解

    先看下MSDN对OnIdle()介绍: CWinApp::OnIdle OnIdle is called in the default message loop when the application's message queue is empty. Use your override to call your own background idle-handler tasks.      对于一般桌面应用程序中比较少重载这个函数.对于像是视频游戏这一块确有不少用处.在Win32 SDK的开

  • Vue.js之$emit用法案例详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn:  例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&

  • js中getBoundingClientRect( )方法案例详解

    一.getBoundingClientRect() 解析 getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置. 语法 rectObject = object.getBoundingClientRect(); 值 rectObject.top:元素上边到视窗上边的距离; rectObject.right:元素右边到视窗左边的距离; rectObject.bottom:元素下边到视窗上边的距离; rectObject.left:元素左边到视窗左边的距离; rect

  • React 中 setState 的异步操作案例详解

    目录 前言 React 中的 setState 为什么需要异步操作? 什么时候setState会进行同步操作? 前言 在使用state的时候, 如果我们企图直接修改state中的某一个值之后直接打印(使用)他,就会发现,他其实并没有改变. 就像下面的例子,企图通过点击事件之后就使用修改之后的state的值,但是会发state中的并没有被立即修改,还是原先的值,我们都知道那是因为 setState就相当于是一个异步操作,不能立即被修改. import React, { Component } fr

  • MyBatis框架零基础快速入门案例详解

    目录 一.创建数据库和表 二.创建maven工程 三.代码编写 1.编写Student实体类 2.编写DAO接口StudentDao 3.编写DAO接口Mapper映射文件StudentDao.xml. 4.创建MyBatis主配置文件 四.创建测试类进行测试 1.创建测试类MyBatisTest 2.配置日志功能 五.增删改操作 insert操作 MyBatis下载地址:https://github.com/mybatis/mybatis-3/releases 一.创建数据库和表 数据库名ss

  • React 首页加载慢问题性能优化案例详解

    学习了一段时间React,想真实的实践一下.于是便把我的个人博客网站进行了重构.花了大概一周多时间,网站倒是重构的比较成功,但是一上线啊,那个访问速度啊,是真心慢,慢到自己都不能忍受,那么小一个网站,没几篇文章,慢成那样,不能接受.我不是一个追求完美的人,但这样可不行.后面大概花了一点时间进行性能的研究.才发现慢是有原因的. React这类框架? 目前主流的前端框架React.Vue.Angular都是采用客户端渲染(服务端渲染暂时不在本文的考虑范围内).这当然极大的减轻了服务器的压力.相对的浏

  • React跨端动态化之从JS引擎到RN落地详解

    目录 一 为什么跨端动态化迫在眉睫 二 首当其冲的为什么是 React Native 三 JS 引擎让跨端动态化成为可能 四 走进 React Native 的世界 五 总结 一 为什么跨端动态化迫在眉睫 目前很多互联网大厂的移动端开发都在朝着跨端动态化方向发展.由于快速迭代开发或者对原生包体积要求严格,及其对资源成本的把控,实现跨端动态化迫在眉睫.我们先来看看 Native 原生开发的一些不足之处: 1 原生开发周期时间长,审核周期长,会影响到需求发布和迭代效率,有些场景下会更加棘手,比如修复

  • React Redux应用示例详解

    目录 一 React-Redux的应用 1.学习文档 2.Redux的需求 3.什么是Redux 4.什么情况下需要使用redux 二.最新React-Redux 的流程 安装Redux Toolkit 创建一个 React Redux 应用 基础示例 Redux Toolkit 示例 三.使用教程 安装Redux Toolkit和React-Redux​ 创建 Redux Store​ 为React提供Redux Store​ 创建Redux State Slice​ 将Slice Reduc

随机推荐