React-redux 和 redux

           React-redux 和 redux这俩个工具和vue中vuex很像，相当于一个组件通信的作用

            redux的使用

                sotre的入口文件

/* 
    改文件专门用于暴露一个store对象,整个应用只有一个store对象
*/


// 引入createStore,专门用于创建redux中最为核心的store对象
import { createStore} from 'redux'
// 引入CountReducer
import countReducer from './count_reducer'

const store = createStore(countReducer)

export default store

 

/*  
    1.改文件是用于创建一个Count组件服务的reducer,reducer的本质就是一个函数
    2.reducer函数就会接到俩个参数,分别为:之前的状态(preState) 动作对象(action)
*/
// 初始化值
const initState = 0

export default function countReducer (preState=initState,action){
    const {type,data} = action
    switch(type){
        case "increment":
            return preState + data
        case "decrement":
            return preState - data
        default :
            return preState
    }
}

简单的使用

import React, { Component } from 'react'
// 引入store,用于获取store找那个状态
import store from '../../redux/store'

export default class Count extends Component {

    // state = { count: 0 }
    componentDidMount() {
        store.subscribe(() => {
            this.setState({})
        })
    }

    increment = () => {
        const { value } = this.section
        // 通知redux加value
        store.dispatch({ type: 'increment', data: value * 1 })
    }
    decrement = () => {
        const { value } = this.section
        // 通知redux加value
        store.dispatch({ type: 'decrement', data: value * 1 })
    }
    render() {
        return (
            <div>
                <h1>当前求和值为:{store.getState()}</h1>
                <select ref={c => { this.section = 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;
            </div>
        )
    }
}

 action的使用

/* 
    改文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'


// 同步
export const createIncrementAction=(data)=>({type:INCREMENT,data})
export const createDecrementAction=(data)=>({type:DECREMENT,data})
// 异步action ,就是指action的值为函数,异步action中一般会调用同步action
export const createIncrementAsyncAction=(data,time)=>{
    return (dispatch)=>{
        setTimeout(()=>{
             dispatch(createIncrementAction(data))
        },time)
    }

}

react-redux的使用(休要一个容器去装)

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createDecrementAction, createIncrementAction, createIncrementAsyncAction } from '../../redux/action/count'
class Count extends Component {
    increment = () => {
        const { value } = this.section
        // 通知redux加value
        this.props.createIncrementAction(+value)
    }
    decrement = () => {
        const { value } = this.section
        // 通知redux加value
        this.props.createDecrementAction(+value)
    }
    asyncincrement = () => {
        const { value } = this.section
        this.props.createIncrementAsyncAction(+value, 500)
    }
    render() {
        console.log("123123", this.props);
        return (
            <div>
                <h1>我是Count组件,下面组件人数{this.props.personArr.length}</h1>
                <h3>当前求和值为:{this.props.count}</h3>
                <select ref={c => { this.section = 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.asyncincrement}>异步加</button>&nbsp;
            </div>
        )
    }
}

export default connect(
    state => ({ personArr: state.personReducer, count: state.countReducer }),
    {
        createDecrementAction,
        createIncrementAction,
        createIncrementAsyncAction
    }
)(Count)

这是最终react-redux 和 react的目录格式