在上一节中初步入门了redux的使用，但是考虑问题redux如何融入到react中？

一、朴素做法

import React, { PureComponent } from 'react';
import store from '../store';
import { addAction, subAction} from '../store/actionCreator'

export default class Home extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            number: store.getState().number 
        }
    }
  
  componentDidMount() {
     // unsubscribe绑到了this上，方便接下来调用
    this.unsubscribe = store.subscribe(() => {
        this.setState({
            number: store.getState().number
        })
    })
  }
  // 卸载监听
  componentWillUnmount() {
      this.unsubscribe();
  }

  render() {
    return (
      <div>
        <h1>Home</h1>
        <div>
            <h2>当前计数：{this.state.number}</h2>
            <button onClick={e => this.add()}>+1</button>
            <button onClick={e => this.sub()}>-1</button>
        </div>
      </div>
    );
  }

  add() {
    store.dispatch(addAction(1))
  }

  sub() {
    store.dispatch(subAction(1))
  }
}

二、使用react-redux

安装react-redux

yarn add react-redux

Home组件代码

import React, { PureComponent } from 'react';
import { addAction, subAction} from '../store/actionCreator'
import { connect } from 'react-redux'

class Home extends PureComponent {
  render() {
    return (
      <div>
        <h1>Home</h1>
        <div>
            <h2>当前计数：{this.props.number}</h2>
            <button onClick={e => this.props.add()}>+1</button>
            <button onClick={e => this.props.sub()}>-1</button>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    number: state.number
  }
}

const mapDispatchToProps = dispatch => {
  return {
    add() {
      dispatch(addAction(1))
    },
    sub() {
      dispatch(subAction(1))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)

Home的父组件index.js

import React, { Component } from 'react'
import Home from './Home'
import { Provider } from 'react-redux'
import store from './store'

export default class App extends Component {
  render() {
    return (
      <Provider store={ store }>
        <Home/>
      </Provider>
    )
  }
}