看懂Redux的基础案例(无action实现加法)

简介: 看懂Redux的基础案例(无action实现加法)

实现效果

image.png

入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './redux/store'
ReactDOM.render(<App store={store}/>,document.querySelector('#root'))
store.subscribe(() => {
    ReactDOM.render(<App store={store}/>,document.querySelector('#root'))
});

外壳文件App.js

import React, { Component } from 'react';
class App extends Component {
    componentDidMount() {
        console.log(this.props.store);
    }
    Increment = () => {
        const {value} = this.selectNumber;
        this.props.store.dispatch({type: 'increment',data: value*1})
    };
    Decrement = () => {
        const {value} = this.selectNumber;
        this.props.store.dispatch({type: 'decrement',data: value*1})
    }
    IncrementIfOdd = () => {
        const {value} = this.selectNumber;
        const count = this.props.store.getState();
        if (count % 2 !== 0) {
            this.props.store.dispatch({type: 'increment',data: value*1});
        }
    }
    IncrementAsync = () => {
        const {value} = this.selectNumber;
        setTimeout(() => {
            this.props.store.dispatch({type: 'increment',data: value*1});
        },1000)
    }
    render() {
        const count = this.props.store.getState();
        return (
            <div>
                <h1>当前求和为:{count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;&nbsp;
                <button onClick={this.Increment}>+</button>&nbsp;
                <button onClick={this.Decrement}>-</button>&nbsp;
                <button onClick={this.IncrementIfOdd}>奇数则+</button>&nbsp;
                <button onClick={this.IncrementAsync}>异步+</button>
            </div>
        );
    }
}
export default App;

reducer.js

let initState = 0;
export default function operatorCount(preState = initState, action) {
    // 规则:不能修改传递过来的preState
    console.log('reducer被调用了');
    const { type, data } = action;
    let newState;
    switch (type) {
        case 'increment':
            newState = preState + data;
            return newState;
        case 'decrement':
            newState = preState - data;
            return newState;
        default:
            return preState;
    }
}

store.js

import {createStore} from 'redux';
import reducer from './reducer'
export default(createStore(reducer))
相关文章
|
3天前
|
JavaScript 前端开发
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
86 2
|
7月前
|
JavaScript
16Vue - 计算属性(基础例子)
16Vue - 计算属性(基础例子)
21 0
|
8月前
|
存储 缓存 Serverless
GO数组解密:从基础到高阶操作
GO数组解密:从基础到高阶操作
67 0
|
12月前
|
前端开发
【React工作记录五十四】形成新数组的方式扩展运算符
【React工作记录五十四】形成新数组的方式扩展运算符
38 0
|
前端开发
前端学习案例2:ES6中的修饰器2
前端学习案例2:ES6中的修饰器2
56 0
前端学习案例2:ES6中的修饰器2
|
前端开发
前端学习案例1:ES6中的修饰器1
前端学习案例1:ES6中的修饰器1
57 0
前端学习案例1:ES6中的修饰器1
|
前端开发
前端学习案例3:ES6中的修饰器3
前端学习案例3:ES6中的修饰器3
41 0
前端学习案例3:ES6中的修饰器3
|
前端开发
前端学习案例4:ES6中的修饰器4
前端学习案例4:ES6中的修饰器4
47 0
前端学习案例4:ES6中的修饰器4
|
前端开发
前端学习案例4-promise封装详解4 原
前端学习案例4-promise封装详解4 原
54 0
前端学习案例4-promise封装详解4 原
|
前端开发
前端学习案例4-偏函数4 原
前端学习案例4-偏函数4 原
46 0
前端学习案例4-偏函数4 原