react-redux使用（简单版）（一天一个问题2）

第一步创建store，包裹顶级组件，传递store

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

import { createStore } from 'redux'//创建一个 Redux store 来以存放应用中所有的 state
import { Provider } from 'react-redux' //包裹顶级组件，将store传递下去
import reducer from './index.reducer'

//创建store
const store = createStore(reducer);//初始化state，以及reducer函数

ReactDOM.render(
    <Provider store={store}>
        <App></App>
    </Provider>
,document.getElementById('root'))

reducer内容

const tiger = 10000

//这是action
const increse = {
    type:"涨工资"
}
const decrease = {
    type:"扣工资"
}

const reducer = (state=tiger,action)=>{//没有传action时，默认返回state
    switch(action.type){
        case '涨工资':
            return state+=100;
        case '扣工资':
            return state-=100;
        default:
            return state;
    }
}
export default reducer

组件内实际使用

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Count extends Component{
    componentDidMount(){
        console.log(this.props)
    }
    render(){
        const { PayIncrease, PayDecrease} = this.props;
        return (
            <div className="a">
                <h2>当月工资为{this.props.tiger}</h2>
                <button onClick={PayIncrease}>升职加薪</button>
                <button onClick={PayDecrease}>迟到罚款</button>
            </div>
        )
    }
}

//需要渲染什么数据state
function mapStateToProps(state){//获取要展示的state---将state转成popps
    return{
        tiger:state
    }
}

//需要触发什么行为
function mapDispatchToProps(dispatch){//将dispatch转成props
    return {
        PayIncrease:()=>dispatch({type:'涨工资'}),
        PayDecrease:()=>dispatch({type:'扣工资'})
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Count)

博客地址