zoukankan      html  css  js  c++  java
  • Redux Counter example

    此项目模板是使用Create React App构建的,它提供了一种简单的方法来启动React项目而无需构建配置。
    使用Create-React-App构建的项目包括对ES6语法的支持,以及几种非官方/尚未最终形式的Javascript语法,
    先看效果

    分析代码为
    1.入口文件

    import React from 'react'
    import ReactDOM from 'react-dom'
    //引入redux
    import { createStore } from 'redux'
    //入口引入组件
    import Counter from './components/Counter'
    //引入reducer
    import counter from './reducers'
    
    const store = createStore(counter)
    const rootEl = document.getElementById('root')
      // 通过dispatch一个action来set state
    const render = () => ReactDOM.render(
      <Counter
        value={store.getState()}
        onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
        onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
      />,
      rootEl
    )
    
    render()
    //订阅subscribe
    store.subscribe(render)
    
    

    reducer纯函数

    //reducer.js
    //纯函数state改变
    export default (state = 0, action) => {
      switch (action.type) {
        case 'INCREMENT':
          return state + 1
        case 'DECREMENT':
          return state - 1
        default:
          return state
      }
    }
    
    //counter组件
    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) {
          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
    
  • 相关阅读:
    Automatically Display Menu on Hover
    WPF自学教程系列1:如何将WPF空间嵌套到Form窗口?
    NET中的内存管理,GC机制,内存释放过程. 转载
    C++ 初始化和赋值的区别
    2.尽量用const, enum, inline代替#define Prefer const, enum, inline to #define.
    1.视C++为一个语言联邦 View C++ as a federation of languages
    C++内存对齐
    C++ class和struct的区别
    redhat AS5 Samba服务配置
    windowsXP & 2003 加固
  • 原文地址:https://www.cnblogs.com/smart-girl/p/10782331.html
Copyright © 2011-2022 走看看