redux求和案例-精简版

效果图

安装redux,此处安装的版本是4.1.2

npm add redux

App.js

import React, { Component } from 'react'
import Count from './components/Count'
export default class App extends Component {
    render() {
        return (
            <div>
               <Count/>
            </div>
        )
    }
}

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"))
store.subscribe(()=>{
    ReactDOM.render(<App/>,document.getElementById("root"))
})

component/Count/index.jsx

import React, { Component } from 'react'
//引入store,用于获取redux中报错的状态
import store from '../../redux/store'

export default class Count extends Component {
    state={carName:'奔驰'}
    // componentDidMount(){
    //     //检测redux中状态的变化，只要变化，就调用render
    //     store.subscribe(()=>{
    //        this.setState({

    //        })
    //     })
    // }
    //加法
    increment=()=>{
        const{value}=this.selectNumber
       //通知redux加value
       store.dispatch({type:'increment',data:value*1})
    }
    //减法
    decrement=()=>{
        const{value}=this.selectNumber
        store.dispatch({type:'decrement',data:value*1})
    }
    //奇数再加
    incrementIfOdd=()=>{
        const{value}=this.selectNumber
        const count=store.getState()
       if(count%2!=0){
        store.dispatch({type:'increment',data:value*1})
       }
    }
    //异步加
    incrementAsync=()=>{
        const{value}=this.selectNumber
       setTimeout(() => {
        store.dispatch({type:'increment',data:value*1})
       }, 500);
    }
    render() {
        return (
            <div>
                <h1>当前求和为：{store.getState()}</h1>&nbsp;
                <select ref={c=>this.selectNumber=c}>&nbsp;
                    <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}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>&nbsp;
            </div>
        )
    }
}

store.js

/**该文件专门用于暴露一个store对象，整个应用只有一个store对象 */
//引入createStore,专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//暴露store
export default createStore(countReducer)

redux/count_reducer.js

/**
 * 1.该文件是用于创建一个为Count组件服务的reducer,reducer的本质是一个函数
 * 2.reducer函数会接到两个参数，分别为：之前的状态(preState),动作对象(action)
 */
const initState=0//初始化状态
export default function countReducer(preState=initState, action) {
    console.log(preState,action)
  //从action对象中获取：type、data
  const { type, data } = action;
  //根据type决定如何加工数据
  switch (type) {
    case "increment":
      return preState + data
    case "decrement":
      return preState - data
    default:
        return preState
  }
}