如何优雅的使用redux和react-redux与装饰器的使用

首先安装redux

npm install redux --save

然后安装react-redux

npm install react--save

react-redux提供了Provider和connect两个接口帮助我们更方便的使用redux

Provider应用在最外层，传入store

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

connect负责从外部获取组件所需要的参数，connect可以使用装饰器的方式来写

export default connect(mapStatetoProps, mapDispatchToProps)(App);

组件中获取redux的数据：

const mapStatetoProps = (state) => {
  return {
    num: state.num

  }
}

组件中派发事件有三种方式，第一种：

const mapDispatchToProps = (dispatch) => ({
  add_num: () => {
    dispatch(add_num());
  },
  remove_num: () => {
    dispatch(remove_num());
  }
});

第二种：

const mapDispatchToProps = {
  add_num,
  remove_num,
  addAsync
};

第三种使用修饰符，需要配置webapck

npm run eject
cnpm install babel-plugin-transform-decorators-legacy  --save-dev
cnpm install  @babel/plugin-proposal-decorators --save-dev

然后在package.json中写入：

"plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]

使用方法：

@connect(
  state => ({ num: state.num }),//这里获取数据
  { add_num, remove_num, addAsync }//这里派发事件
)

完整代码如下：

import React, { Component } from 'react';
import './App.css';
import { add_num, remove_num, addAsync } from './redux/action';
import { connect } from 'react-redux'




@connect(
  state => ({ num: state.num }),//这里获取数据
  { add_num, remove_num, addAsync }//这里派发事件
)

class App extends Component {
  constructor(props) {
    super(props);


  }

  render() {


    return (

      <div className="App" >
        <p>有{this.props.num}个棒棒糖</p>
        <button onClick={this.props.add_num} >买了一个棒棒糖</button>
        <button onClick={this.props.remove_num}>吃了一个棒棒糖</button>
        <button onClick={this.props.addAsync}>等下买一个棒棒糖</button>
      </div>
    );
  }
}

export default App;