react-redux使用

需求：单击按钮实现数字的加减

App.jsx

import React, { Component } from 'react'
import { Button } from 'antd';
import {connect} from 'react-redux'
import * as counterActions from './reduxDemo/actions/counter.js'
import {bindActionCreators} from 'redux'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'zhangsan',
      count: 0
    }
  }
  render() {
    console.log(this.props)
    return (

      <div className="App">
        <Button type="primary" onClick={()=> this.props.counterActions.increment(10)}>Increment</Button>
        <Button onClick={()=> this.props.counterActions.drecrement(5)}>Drecrement</Button>
      <h1>{this.props.counter}</h1>
      </div>

    );
  }
}

const mapStateToProps=(state)=>{
  return{
    counter:state
  }
}
const mapStateToDispatch=(dispatch)=>{
  return{
    counterActions:bindActionCreators(counterActions,dispatch)
  }
}
export default connect(mapStateToProps,mapStateToDispatch)(App)

index.js

import React from 'react';
import App from './App.jsx';
import { createStore } from 'redux'
import reducer from './reduxDemo/reducers/counter.js'
import {Provider} from 'react-redux'

const store = createStore(reducer);//创建store仓库

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

reduxDemo/constants/index.js

export const INCREMENT = 'INCREMENT';
export const DRECREMENT = 'DRECREMENT';

reduxDemo/reducers/counter.js

import * as actions from '../constants/index'
const counter = (state=0,action)=>{
    switch(action.type){
        case actions.INCREMENT:
            return state+action.num;
        case actions.DRECREMENT:
            return state-action.num;
        default:
            return state
    }
}
export default counter;

reduxDemo/actions/index.js

import * as actions from '../constants/index'
export function increment(num){
    return{
        type:actions.INCREMENT,
        num
    }
}
export function drecrement(num){
    return{
        type:actions.DRECREMENT,
        num
    }
}