看懂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))
相关文章
|
2月前
|
前端开发 JavaScript
前端基础(六)_流程控制语句(if、if-else、if-else嵌套、switch)
本文介绍了JavaScript中的流程控制语句,包括if、if-else、if-else嵌套和switch语句。
18 2
前端基础(六)_流程控制语句(if、if-else、if-else嵌套、switch)
|
6天前
|
前端开发 JavaScript 中间件
React中使用​​useReducer​​​高阶钩子来管理状态
通过本文的介绍,您可以在React中使用 `useReducer`高阶钩子来管理复杂的状态逻辑。`useReducer`不仅提供了清晰的状态管理方式,还可以通过与 `useContext`结合,实现全局状态管理。此外,通过自定义中间件,可以进一步扩展其功能。希望本文对您理解和应用 `useReducer`有所帮助。
14 0
|
3月前
|
JavaScript
Redux 中定义 Action
【8月更文挑战第30天】
52 0
|
5月前
|
前端开发 JavaScript
react 逻辑 AND 运算符 (&&)
react 逻辑 AND 运算符 (&&)
|
6月前
|
JavaScript 前端开发
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
362 2
|
存储 缓存 Serverless
GO数组解密:从基础到高阶操作
GO数组解密:从基础到高阶操作
88 0
|
前端开发
【React工作记录五十四】形成新数组的方式扩展运算符
【React工作记录五十四】形成新数组的方式扩展运算符
54 0
|
前端开发
前端学习案例4-偏函数4 原
前端学习案例4-偏函数4 原
60 0
前端学习案例4-偏函数4 原
|
Dart 算法 索引
[Flutter]足够入门的Dart语言系列之流程控制语句:条件和循环(if、switch、for、while)
流程控制相关的语句主要分为:条件语句、循环语句、循环中的中断语句、以及异常处理语句。流程控制用于根据需要组合不同的语句、执行不同的处理,完成正确的流程逻辑。由此可以更好、更正确的完成程序功能...
572 0
[Flutter]足够入门的Dart语言系列之流程控制语句:条件和循环(if、switch、for、while)