文档章节

Redux实例--1 Counter

奋斗的小芋头
 奋斗的小芋头
发布于 2017/07/12 12:40
字数 441
阅读 7
收藏 1

一. index.js

(父界面)

1. 知识点

1.State

Store 对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。

当前时刻的 State,可以通过store.getState()拿到。


import { createStore } from 'redux';
const store = createStore(fn);

const state = store.getState();

 

2. store.subscribe()

Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。


import { createStore } from 'redux';
const store = createStore(reducer);

store.subscribe(listener);

2.父界面向Counter组件传入三个值

1. 值 :value

value={store.getState()}

2.加函数 : 

onIncrement={() => store.dispatch({ type: 'INCREMENT' })}

3.减函数 :

onDecrement={() => store.dispatch({ type: 'DECREMENT' })}

 

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import Counter from './components/Counter.js'
import counter from './reducers/index.js'

const store = createStore(counter)
const rootEl = document.getElementById('root')

const render = () => ReactDOM.render(
  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
)

render()
store.subscribe(render)

二. reducer/index.js

Reducer 方法

判断action 的type值: 分别加1,减1.

 1. Reducer

Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State。

const reducer = function (state, action) {
  // ...
  return new_state;
};
export default (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

 

三. Counter.js

 

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Counter extends Component {
  constructor(props) {
    super(props);
    this.incrementAsync = this.incrementAsync.bind(this);
    this.incrementIfOdd = this.incrementIfOdd.bind(this);
  }

  incrementIfOdd() {
    if (this.props.value % 2 !== 0) {  //获取从父界面传入的value
      this.props.onIncrement()        //获取从父界面传入的函数
    }
  }

  incrementAsync() {
    setTimeout(this.props.onIncrement, 1000)  //点击后延迟调用。
  }

  render() {
    const { value, onIncrement, onDecrement } = this.props  // 获取从父级传入的值与函数。
    return (
      <p>
        Clicked: {value} times
        {' '}
        <button onClick={onIncrement}>
          +
        </button>
        {' '}
        <button onClick={onDecrement}>
          -
        </button>
        {' '}
        <button onClick={this.incrementIfOdd}>
          Increment if odd
        </button>
        {' '}
        <button onClick={this.incrementAsync}>
          Increment async
        </button>
      </p>
    )
  }
}

Counter.propTypes = {   //限制参数为必须传入
  value: PropTypes.number.isRequired,
  onIncrement: PropTypes.func.isRequired,
  onDecrement: PropTypes.func.isRequired
}

export default Counter

 

© 著作权归作者所有

奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
如何存储 React 组件的数据

主要讲解这几个部分:state、store、static、this、module-global data 前言 随着 React 和 Redux 的到来,一个共同的问题被问到: 我应该将数据保存在 Redux Store 中呢?还是应该保存成本地...

卢林
2016/10/16
87
0
使用Typescript编写Redux+Reactjs应用程序

注:本文的原始资料和示例来自[ServiceStackApps/typescript-redux][1] ,根据我的实际情况,做了一些调整,详见文内说明,感谢原作者的无私分享。 本文通过设置,运行和探索Javascript一些高...

假正经哥哥
2016/03/28
4.8K
17
Redux 的黑魔法

相信很多人接触 Redux 时都会被它奇怪的 API 搞得云里雾里。这里不再冗述 Flux 架构的思想,实现 Flux 的工具有很多,它们只是在实现这种编程模式,并不会有太复杂的逻辑。事实也是这样,Red...

yinyongcom666
2016/03/28
59
0
原生实现一个react-redux的代码示例

自己动手实现一个react-redux之前试过自己动手实现一个redux,这篇blog主要记录动手实现一个react-redux的过程。 这个react-redux还有一点点小瑕疵,我以一个计数器作为例子来实现的。 这是目...

peakedness丶
2018/11/15
0
0
使用 TypeScript + React + Redux 进行项目开发(入门篇,附源码)

本文详细介绍了如何使用 Create-React-App 编写 TypeScript + React 项目 前言 对于 TypeScript + React 开发,MicroSoft 编写了一个 TypeScript-React-Starter 的例子,Github 地址。有需要...

暖生
03/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

$_ENV

$_ENV数组中的内容是在PHP解析器运行时,从PHP所在服务器中的环境变量, 导入到PHP的全局命名空间, 转变为PHP全局变量。 这些变量很多是由支持 PHP 运行的 Shell 提供的,并且不同的系统很可能...

vinci321
刚刚
0
0
Guava RateLimiter + AOP注解实现单机限流、统计QPS

1、基于springboot项目pom.xml添加如下依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId></dependency><d......

铁骨铮铮
今天
3
0
JAVA NIO Connection reset by peer 异常

客户端主动断开与服务端的连接,但是如果客户端掉线,服务端就接收不到了。。 异常信息 java.io.IOException: Connection reset by peerat java.base/sun.nio.ch.FileDispatcherImpl.read...

Jeremy_pan
今天
1
0
龙芯版办公软件下载

金山wps office   rpm包:http://ftp.loongnix.org/os/loongnix/1.0/os/Packages/w/wps-office-10.8.0.6472-1.a20p1.mips64el.rpm   deb包:http://packages.deepin.com/loongson/pool/......

gugudu
今天
3
0
BI报表分析和数据可视化,推荐这三个开源工具!

开源篇 一、Superset 1、技术架构:Python + Flask + React + Redux + SQLAlchemy 2、使用人群: (1)开发/分析人员做好看板,业务人员浏览看板数据 (2)业务人员可自行编辑图表,查看满足...

飓风2000
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部