♠ react-redux的使用

redux融入react代码

手动和redux联系

在 componentDidMount 中定义数据的变化，当数据发生变化时重新设置 counter;在发生点击事件时，调用store的dispatch来派发对应的action；

查看代码

//手动和redux联系
import React, { PureComponent } from 'react';

import store from '../store';
import {
  subAction
} from "../store/actionCreators";

export default class About 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>
        <hr />
        <h1>About</h1>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={e => this.decrement()}>-1</button>
        <button onClick={e => this.subNumber(5)}>-5</button>
      </div>
    )
  }

  decrement() {
    store.dispatch(subAction(1));
  }

  subNumber(num) {
    store.dispatch(subAction(num));
  }
}

自定义connect函数

把手动订阅和取消订阅抽离到connect中

查看代码

import React, { PureComponent } from 'react';

import {connect} from '../utils/connect';
import {
  incAction,
  addAction
} from '../store/actionCreators'

class Home extends PureComponent {
  render() {
    return (
      <div>
        <h1>Home</h1>
        <h2>当前计数: {this.props.counter}</h2>
        <button onClick={e => this.props.increment()}>+1</button>
        <button onClick={e => this.props.addNumber(5)}>+5</button>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  counter: state.counter
})

const mapDispatchToProps = dispatch => ({
  increment() {
    dispatch(incAction());
  },
  addNumber(num) {
    dispatch(addAction(num));
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Home);

但是上面的connect函数有一个很大的缺陷：依赖导入的store，如果我们将其封装成一个独立的库，需要依赖用于创建的store，我们应该如何去获取呢？难道让用户来修改我们的源码吗？不太现实；正确的做法是我们提供一个Provider，Provider来自于我们创建的Context，让用户将store传入到value中即可；

查看代码

import React, { PureComponent } from "react";

import { StoreContext } from './context';

export function connect(mapStateToProps, mapDispachToProp) {
  return function enhanceHOC(WrappedComponent) {
    class EnhanceComponent extends PureComponent {
      constructor(props, context) {
        super(props, context);

        this.state = {
          storeState: mapStateToProps(context.getState())
        }
      }

      componentDidMount() {
        this.unsubscribe = this.context.subscribe(() => {
          this.setState({
            storeState: mapStateToProps(this.context.getState())
          })
        })
      }

      componentWillUnmount() {
        this.unsubscribe();
      }

      render() {
        return <WrappedComponent {...this.props}
          {...mapStateToProps(this.context.getState())}
          {...mapDispachToProp(this.context.dispatch)} />
      }
    }

    EnhanceComponent.contextType = StoreContext;

    return EnhanceComponent;
  }
}

react-redux使用

开始之前需要强调一下，redux和react没有直接的关系，你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux。虽然我们之前已经实现了connect、Provider这些帮助我们完成连接redux、react的辅助工具，但是实际上redux官方帮助我们提供了 react-redux 的库，可以直接在项目中使用，并且实现的逻辑会更加的严谨和高效。

安装react-redux：yarn add react-redux

 

react-redux源码导读

组件中异步操作

我们可以直接通过同步的操作来dispatch action，state就会被立即更新。但是真实开发中，redux中保存的很多数据可能来自服务器，我们需要进行异步的请求，再将数据保存到redux中。网络请求可以在class组件的componentDidMount中发送，所以我们可以有这样的结构：

上面的代码有一个缺陷：

• 我们必须将网络请求的异步代码放到组件的生命周期中来完成；
• 事实上，网络请求到的数据也属于我们状态管理的一部分，更好的一种方式应该是将其也交给redux来管理；

但是在redux中如何可以进行异步的操作呢？答案就是使用中间件（Middleware）；学习过Express或Koa框架的童鞋对中间件的概念一定不陌生；在这类框架中，Middleware可以帮助我们在请求和响应之间嵌入一些操作的代码，比如cookie解析、日志记录、文件压缩等操作；

redux也引入了中间件（Middleware）的概念：

• 这个中间件的目的是在dispatch的action和最终达到的reducer之间，扩展一些自己的代码；
• 比如日志记录、调用异步接口、添加代码调试功能等等；

我们现在要做的事情就是发送异步的网络请求，所以我们可以添加对应的中间件：这里官网推荐的、包括演示的网络请求的中间件是使用 redux-thunk；

redux-thunk是如何做到让我们可以发送异步的请求呢？

• 我们知道，默认情况下的dispatch(action)，action需要是一个JavaScript的对象；
• redux-thunk可以让dispatch(action函数)，action可以是一个函数；
• 该函数会被调用，并且会传给这个函数一个dispatch函数和getState函数；
  • dispatch函数用于我们之后再次派发action；
  • getState函数考虑到我们之后的一些操作需要依赖原来的状态，用于让我们可以获取之前的一些状态；

如何使用redux-thunk

1.安装redux-thunk，yarn add redux-thunk

2.在创建store时传入应用了middleware的enhance函数

• 通过applyMiddleware来结合多个Middleware, 返回一个enhancer；
• 将enhancer作为第二个参数传入到createStore中；

redux-devtools

redux可以方便的让我们对状态进行跟踪和调试，那么如何做到呢？

redux官网为我们提供了redux-devtools的工具；

利用这个工具，我们可以知道每次状态是如何被修改的，修改前后的状态变化等等；

安装该工具需要两步：

• 第一步：在对应的浏览器中安装相关的插件（比如Chrome浏览器扩展商店中搜索Redux DevTools即可，其他方法可以参考GitHub）；
• 第二步：在redux中继承devtools的中间件；

查看代码

import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';

import saga from './saga';
import reducer from './reducer.js';

// composeEnhancers函数
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace: true}) || compose;

// 应用一些中间件
// 1.引入thunkMiddleware中间件(上面)
// 2.创建sagaMiddleware中间件
const sagaMiddleware = createSagaMiddleware();

const storeEnhancer = applyMiddleware(thunkMiddleware, sagaMiddleware);
const store = createStore(reducer, composeEnhancers(storeEnhancer));

sagaMiddleware.run(saga);

export default store;