react结合redux简单学习

一. react结合redux

1. redux融入react代码

目前redux在react中使用是最大的，所以我们需要将之前编写的redux代码，融入到react当中去。
这里创建两个组件：

• Home组件：其中会展示当前的counter值，并且有一个+1和+5的按钮；
• Profile组件：其中会展示当前的counter值，并且有一个-1和-5的按钮；

store文件和上次的一样：index中的引入有些改变：其他的名字改变一下
store中 index.js 文件

// import redux from 'redux';//之前通过node模块修改的引入
import {
   createStore} from 'redux';//现在的引入方式
import reducer from './reducer.js';

// const store = redux.createStore(reducer);
const store = createStore(reducer);

export default store;

home.js代码实现：

import React, {
    PureComponent } from 'react';

import store from '../store';
import {
   
  addAction
} from '../store/actionCreators';

export default class Home extends PureComponent {
   
  constructor(props) {
   
    super(props);

    this.state = {
   
      counter: store.getState().counter
    }
  }

  componentDidMount() {
   
    //订阅  
   this.unsubscribue = store.subscribe(() => {
   
      this.setState({
   
        counter: store.getState().counter
      })
    })
  }
  componentWillUnmount() {
   
    //取消订阅
    this.unsubscribue();
  }

  render() {
   
    return (
      <div>
        <h1>Home</h1>
        <h2>当前计数: {
   this.state.counter}</h2>
        <button onClick={
   e =>