React Summation case

Pure react sum

Count

import React, { Component } from 'react'

export default class Count extends Component {

state = {count:0}

/ / add
increment = () = >{
        const {value} = this.selectNumber
        const {count} = this.state
        this.setState({count:count+value*1})}/ / subtraction
decrement = () = >{
        console.log(this.selectNumber.value);
        const {value} = this.selectNumber
        const {count} = this.state
        this.setState({count:count-value*1})}// Add the odd number
incrementIfOdd = () = >{
        const {value} = this.selectNumber
        const {count} = this.state
        if(count % 2! = =0) {this.setState({count:count+value*1}}})/ / asynchronous
incrementAsync = () = >{
        const {value} = this.selectNumber
        const {count} = this.state
        setTimeout(() = >{
                this.setState({count:count+value*1})},500)}render() {
    return (
    <div>
        <h1>The current sum is: {this.state.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;
    <button onClick={this.increment}>+</button>&nbsp;
    <button onClick={this.decrement}>-</button>&nbsp;
    <button onClick={this.incrementIfOdd}>The sum is now odd plus</button>&nbsp;
    <button onClick={this.incrementAsync}>Asynchronous add</button>&nbsp;
    </div>)}}Copy the code

App.jsx

import React, { Component } from 'react'
import Count from './components/Count'

export default class App extends Component {
	render() {
		return (
			<div>
				<Count/>
			</div>)}}Copy the code

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App/>.document.getElementById('root'))
Copy the code

Redux lite version

Count

yarn add redux

import React, { Component } from 'react'
// Store is introduced to get the saved state in redux
import store from '.. /.. /redux/store'

export default class Count extends Component {
/* To check for state changes in redux, call Render, but writing every component that uses redux requires writing componentDidMount is too tedious, call Render directly in the index.js file. * /
/* componentDidMount(){ store.subscribe(()=>{ this.setState({}) }) } */

/ / add
increment = () = >{
    const {value} = this.selectNumber
    store.dispatch({type:'increment'.data:value*1})}/ / subtraction
decrement = () = >{
    const {value} = this.selectNumber
    store.dispatch({type:'decrement'.data:value*1})}// Add the odd number
incrementIfOdd = () = >{
    const {value} = this.selectNumber
    const count = store.getState()
    if(count % 2! = =0){
            store.dispatch({type:'increment'.data:value*1}}})/ / asynchronous
incrementAsync = () = >{
    const {value} = this.selectNumber
    setTimeout(() = >{
            store.dispatch({type:'increment'.data:value*1})},500)}render() {
    return (
        <div>
            <h1>The current sum is: {store.getstate ()}</h1>
            <select ref={c= > this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
            </select>&nbsp;
    <button onClick={this.increment}>+</button>&nbsp;
    <button onClick={this.decrement}>-</button>&nbsp;
    <button onClick={this.incrementIfOdd}>The sum is now odd plus</button>&nbsp;
    <button onClick={this.incrementAsync}>Asynchronous add</button>&nbsp;
        </div>)}}Copy the code

App.jsx

import React, { Component } from 'react'
import Count from './components/Count'

export default class App extends Component {
	render() {
		return (
			<div>
				<Count/>
			</div>)}}Copy the code

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'

ReactDOM.render(<App/>.document.getElementById('root'))
// Call render again if the state in redux changes
store.subscribe(() = >{
	ReactDOM.render(<App/>.document.getElementById('root'))})Copy the code

store.js

/* This file is specifically used to expose a store object, the entire application has only one store object */

// createStore is introduced to create the core store object in Redux
import {createStore} from 'redux'
// Import the reducer as the Count component service
import countReducer from './count_reducer'
//暴露store
export default createStore(countReducer)
Copy the code

count_reducer.js

The reducer function receives two parameters: preState and Action */. The reducer function receives two parameters: preState and Action */

const initState = 0 // Initialize the state to preState. PreState is undefined during initialization
export default function countReducer(preState = initState, action) {
	// console.log(preState);
	// Get type and data from the action object
	const { type, data } = action
	// How to process data according to type
	switch (type) {
		case 'increment': // Add
			return preState + data
		case 'decrement': // If it is minus
			return preState - data
		default:
			return preState
	}
}
Copy the code