使用redux创建react经典求和案例(精简版)

使用redux创建react小demo(精简版)

效果如下

使用redux之前要安装一下redux

当前项目的黑窗口执行一下该命令

先简单介绍一下redux的工作流程

对redux的简介

1. redux是一个专门用于状态管理的js库(并不是react插件库)
2. 虽然在vue,angular和react项目中都可以使用,但是基本都是用在react项目中
3. 作用就是集中管理react应用中多个组件共享的状态

应用场景

1. 某个组件的状态需其他组件可以随时拿到(共享)
2. 一个组件需要改变另一个组件的状态(通信)

redux中的三个核心概念

src目录下创建好redux文件夹 里面包含有reducer.js和store.js

store.js 是用来接收在组件中通过store.dispatch()传来的值 并将其传给reducer.js文件
reducer.js是用来接收redux中的store中传来需要进行加工的值

用于接收

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

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

store.subscribe(()=>{
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
  
})

import React, { Component } from 'react'
import store from '../../redux/store'
export default class Count extends Component {

    add = ()=>{
        const {value} = this.selectVal
        store.dispatch({
            type:'add',
            data:value*1
        })
        // console.log(this.selectVal.option);
    }
    unadd = ()=>{
        const {value} = this.selectVal
        store.dispatch({
            type:'unadd',
            data:value*1
        })

    }
    addOdd = ()=>{
        const {value} = this.selectVal
        const count = store.getState()
        if(count % 2 !== 0){
            store.dispatch({
                type:'addOdd',
                data:value*1
            })
        }
    }
    addAsync = ()=>{
        const {value} = this.selectVal

        setTimeout(()=>{
            store.dispatch({
            type:'addAsync',
            data:value*1
            })
        },700)
    }
    render() {
        return (
            <div>
                <h1>当前数字的和为:{store.getState()}</h1>
                <hr></hr>

                <select  ref={c => this.selectVal=c} >
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.add}>+</button>&nbsp;
                <button onClick={this.unadd}>-</button>&nbsp;
                <button onClick={this.addOdd}>当前数的和为奇数时加</button>&nbsp;
                <button onClick={this.addAsync}>异步加</button>
            </div>
        )
    }
}

//改文件用于暴露一个store对象 整个应用只有一个store对象 用于存储传入redux中的数据

//引入createStore 专门用于创建redux中最核心的 store 对象 
import {createStore} from 'redux'
//引入专门用于为count组件服务的reducer
import countReducer from './count_reducer'
//暴露这个store
//暴露这些大概是因为存入store中的数据要更新为 store中renducer中能够计算的模式
export default createStore(countReducer)

//reducer函数会接收到两个参数  分别为:之前的状态(preState)和动作对象(action)

const initState = 0 //初始化状态(初始值)
export default function countReducer(preState=initState,action) {
    const {type,data} = action
    // if(type === 'add'){
    //    return data+preState
    
    // }else if(type === 'unadd'){
    //     return preState - data
    // }
    switch (type) {
        case 'add':
            return data+preState
        case 'unadd':
            return preState - data
        case 'addOdd':
            return data+preState
        case 'addAsync':
            return data+preState
    
        default:
            return preState
    }
}