看懂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 测试技术
redux 为什么要把 reducer 设计成纯函数
Redux 中的 Reducer 被设计为纯函数,以确保其可预测性和可测试性。纯函数仅依赖输入参数,无副作用,便于调试和维护,支持数据流的清晰追踪,利于状态管理。
|
2月前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:把求和案例改成mapState与mapGetters
《进阶篇第9章》学习vuex知识点后练习:把求和案例改成mapState与mapGetters
16 0
|
2月前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:把求和案例改成mapMutations与mapActions
《进阶篇第9章》学习vuex知识点后练习:把求和案例改成mapMutations与mapActions
11 0
|
4月前
|
JavaScript
Redux 中定义 Action
【8月更文挑战第30天】
62 0
|
4月前
|
JavaScript 开发者
|
5月前
|
JavaScript
VUEX 使用学习四 : action
VUEX 使用学习四 : action
43 0
|
7月前
|
JavaScript 前端开发
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
Vue状态管理:请解释Vuex中的action是什么?它们有什么用途?
408 2
|
7月前
|
前端开发 JavaScript 开发者
很基础但很重要,React 元素本质
很基础但很重要,React 元素本质
|
7月前
|
前端开发
react高阶成分(HOC)例子效果
react高阶成分(HOC)例子效果
|
设计模式 前端开发 JavaScript
什么是高阶成分(HOC)?解释 React 中 render() 的目的?
什么是高阶成分(HOC)?解释 React 中 render() 的目的?