一、下载

  要想使用redux,首先要下载它

  npm install --save redux

二、核心API

  1.createStore()

    作用:创建包含指定reducer的store对象

    编码:import {createStore} from 'redux'

       import counter from './reducers/counter'

       const store = createStore(counter)

  2.store对象

    作用:

      redux库最核心的管理对象

    它内部维护着:

      state

      reducer

    核心方法:

      getState()

      dispatch(action)

      subscribe(listener)

    编码:

      store.getState()

      store.dispatch({type:'INCREMENT',number})

      store.subscribe(render)

三、redux的三个核心概念

  1.action

    标识要执行行为的对象

    包含两个属性:

      type:标识属性,值为字符串,唯一,必要属性

      xxx:数据属性,值类型任意,可选属性

    例子:

      const action = {

        type:'INCREMENT',

        data:2

     }

    Action Creator(创建Action的工厂函数)

      const increment = (number) => ({type:'INCREMENT',number})

  2.reducer

    根据老的state和action,产生新的state的纯函数

    样例:

      export default function counter(state = 0, action){

        switch(action.type){

          case 'INCREMENT':

            return state + action.data

          case 'DECREMENT':

            return state - action.data

          default:

            return state

        }

      }

    注意:

      返回一个新的状态

      不要修改原来的状态

  3.store

    将state、action与reducer联系在一起发的对象

    如何得到这个对象?

      import {createStore} from 'redux'

      import reducer from './reducers'

      const store = createStore(reducer)

    此对象的功能?

      getState():得到state

      dispatch(action):分发action,出发reducer调用,产生新的state

      subscribe(listener):注册监听,当产生了新的state时,自动调用

四、代码:

项目结构:

  

  

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';

import App from './components/app';
import {counter} from './redux/reducers';

//生成store对象
const store = createStore(counter);//内部会第一次调用reduer函数得到初始state
console.log(store, store.getState());

function render() {
    ReactDOM.render(<App store={store}/>, document.getElementById('root'));
}

//初始化渲染
render()

//订阅监听(store中的状态变化了,就会自动调用重绘)
store.subscribe(render)

index.js

import React, {Component} from 'react'
import {INCREMENT, DECREMENT} from '../redux/action-types'

export default class App extends Component {

    increment = () => {
        //1.得到选择的增加数量
        const number = this.select.value * 1
        //2.调用store的方法更新状态
        this.props.store.dispatch({type: INCREMENT, data: number})

    };

    decrement = () => {
        //1.得到选择的增加数量
        const number = this.select.value * 1
        //2.调用store的方法更新状态
        this.props.store.dispatch({type: DECREMENT, data: number})
    };

    incrementIfOdd = () => {
        //1.得到选择的增加数量
        const number = this.select.value * 1
        //2.得到原本的count状态
        const count = this.props.store.getState()
        //3.判断,满足条件再更新状态
        if (count % 2 === 1) {
            //调用store方法更新状态
            this.props.store.dispatch({type: INCREMENT, data: number})

        }
    }

    incrementAsync = () => {
        //1.得到选择的增加数量
        const number = this.select.value * 1
        //启动延时定时器
        setTimeout(() => {
            this.props.store.dispatch({type: INCREMENT, data: number})
        }, 1000)
    };

    render() {
        const count = this.props.store.getState()
        // debugger
        return (
            <div>
                <p>click {count} times</p>
                <div>
                    <select ref={select => this.select = select}>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>&nbsp;
                    <button onClick={this.increment}>+</button>
                    &nbsp;
                    <button onClick={this.decrement}>-</button>
                    &nbsp;
                    <button onClick={this.incrementIfOdd}>increment odd</button>
                    &nbsp;
                    <button onClick={this.incrementAsync}>increment async</button>
                    &nbsp;
                </div>
            </div>
        )
    }
}

app.jsx

/*
* 包含所有action type的常量字符串
* */

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

action-tupes.js

/*
* 包含n个reducer函数的模块
* */
export function counter(state = 0, action) {

    console.log('counter()', state, action)

    switch (action.type) {
        case 'INCREMENT':
            return state + action.data
        case 'DECREMENT':
            return state - action.data
        default:
            return state
    }

}

reducers.jsx

  

    

      

39_redux_counter应用_redux版本的更多相关文章

  1. 45_redux_comment应用_redux版本_异步功能

    /* * 包含所有action的type名称常量 * */ //添加评论 export const ADD_COMMENT = 'add_comment'; //删除评论 export const D ...

  2. 44_redux_comment应用_redux版本_同步功能

    项目结构: components里面的东西没变,将app.jsx移动至containers中 /* * 包含所有action的type名称常量 * */ //添加评论 export const ADD ...

  3. 42_redux_counter应用_redux异步版本

    前言: redux默认不支持异步编程,需要下载redux插件(异步中间件) 如何下载: npm install --save redux-thunk 项目结构: 代码: import React, { ...

  4. 40_redux_counter应用_redux完善版本

    项目结构: 代码: import React from 'react'; import ReactDOM from 'react-dom'; import store from './redux/st ...

  5. 【AR实验室】OpenGL ES绘制相机(OpenGL ES 1.0版本)

    0x00 - 前言 之前做一些移动端的AR应用以及目前看到的一些AR应用,基本上都是这样一个套路:手机背景显示现实场景,然后在该背景上进行图形学绘制.至于图形学绘制时,相机外参的解算使用的是V-SLA ...

  6. ABP入门系列(2)——通过模板创建MAP版本项目

    一.从官网创建模板项目 进入官网下载模板项目 依次按下图选择: 输入验证码开始下载 下载提示: 二.启动项目 使用VS2015打开项目,还原Nuget包: 设置以Web结尾的项目,设置为启动项目: 打 ...

  7. 理解Maven中的SNAPSHOT版本和正式版本

    Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个 ...

  8. MIP 官方发布 v1稳定版本

    近期,MIP官方发布了MIP系列文件的全新v1版本,我们建议大家尽快完成升级. 一. 我是开发者,如何升级版本? 对于MIP页面开发者来说,只需替换线上引用的MIP文件为v1版本,就可以完成升级.所有 ...

  9. 终于等到你:CYQ.Data V5系列 (ORM数据层)最新版本开源了

    前言: 不要问我框架为什么从收费授权转到免费开源,人生没有那么多为什么,这些年我开源的东西并不少,虽然这个是最核心的,看淡了就也没什么了. 群里的网友:太平说: 记得一年前你开源另一个项目的时候我就说 ...

随机推荐

  1. SQL server 建立标后,执行代码添加外键

    alter table dbo.student add constraint FK_tstudent_class foreign key(classno) references dbo.class(c ...

  2. VBA随机地牢生成

    无聊啊--于是,我想做一个随机地图. 但是我很懒,不想做. 但是身体很诚实. 这次是直接在Excel中制作的地图,但是,VB的执行效率很慢,我代码的效率也很慢,导致,一旦地图长宽稍大,就会出现好几分钟 ...

  3. Https网络安全架构设计

    一.对称加密 对称密钥加密(Symmetric-key algorithm)又称对称加密.私钥加密.共享密钥加密,是密码学中的一类加密算法.这类算法在加密和解密时使用相同的密钥,或是使用两个可以简单地 ...

  4. delphi Parallel 之 TTask 初试

    unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  5. cpt212b--- 触摸芯片配置

    软件的应用: 1.可以依照你所需要的芯片类型建立适当的工程,下面是在没有j-link的情况时的一种操作方式 建立完工程后,cpt212b的配置参数页面如上,更改参数点击Save 按钮,软件自动生成 . ...

  6. nis+kerberos 实现服务验证

    1.NIS部分 1.1 简介     NIS(Network Information Service,or Yellow Page or YP) 网络信息服务,由sun公司开发并授权给unix供应商, ...

  7. 解决AndroidStudio引入Jar出现Unable to resolve dependency for ':app@debug/compileClasspath

    今天在做Android项目时遇到一个万脸懵逼的错误,表示没看懂,百度一圈说是被墙啥的 不过最终还是被朕给找到了答案,解决办法如下 点击AndroidStudio左上角 File -> setti ...

  8. CSS Core Technology

    1. Selector Different types of selectors: Selectors can be divided into the following categories: Si ...

  9. WMware 中CentOS系统Hadoop 分布式环境搭建(一)——Hadoop安装环境准备

    1.创建3台虚拟机并装好系统,这里使用64位CentOS. 2.Ping测试[确保两两能ping通]: [ping xxx.xxx.xxx.xxx] 3.安装SSH:[yum install ssh ...

  10. version `GLIBC_2.17' not found 解决方法

    1.先查看是哪个函数用的是GLIBC_2.17 root@emb-pc:/home/emb/temp# nm lib61850.so | grep GLIBC_2.17 U clock_gettime ...