react-redux的深入学习

redux

为什么需要redux

JavaScript开发的应用程序，已经变得越来越复杂了：JavaScript需要管理的状态越来越多，越来越复杂； 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页。

管理不断变化的state是非常困难的：状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化； 当应用程序复杂时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪。

React是在视图层帮助我们解决了DOM的渲染过程，但是State依然是留给我们自己来管理：无论是组件定义自己的state，还是组件之间的通信通过props进行传递；也包括通过Context进行数据之间的共享。

Redux就是一个帮助我们管理State的容器：Redux是JavaScript的状态容器，提供了可预测的状态管理；Redux除了和React一起使用之外，它也可以和其他界面库一起来使用（比如Vue），并且它非常小（包括依赖在内，只有2kb）。

redux的核心理念 — store

比如我们有一个朋友列表需要管理：如果我们没有定义统一的规范来操作这段数据，那么整个数据的变化就是无法跟踪的；比如页面的某处通过products.push的方式增加了一条数据； 又比如另一个页面通过products[0].age = 25修改了一条数据； 那么整个应用程序错综复杂，当出现bug时，很难跟踪到底哪里发生的变化。

redux的核心理念 — action

Redux要求所有数据的变化，必须通过派发（dispatch）action来更新； action是一个普通的JavaScript对象，用来描述这次更新的type和content； 强制使用action的好处是可以清晰的知道数据到底发生了什么样的变化，所有的数据变化都是可跟追、可预测的。

redux的核心理念 — reducer

但是如何将state和action联系在一起呢？答案就是reducer；reducer是一个纯函数；reducer做的事情就是将传入的state和action结合起来生成一个新的state。

redux的三大原则

（1）单一数据源

整个应用程序的state被存储在一颗object tree中，并且这个object tree只存储在一个 store 中：Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护； 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改。

（2）State是只读的

唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State： 这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改state； 这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition（竟态）的问题。

（3）使用纯函数来执行修改

通过reducer将 旧state和 actions联系在一起，并且返回一个新的State： 随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分； 但是所有的reducer都应该是纯函数，不能产生任何的副作用。

下面我们先来单独学习redux，后面再将其与react结合在一起使用

基础示例代码（当然最好对其进行拆分）

const redux = require('redux');

const initialState = {
  counter: 0
}

// reducer
function reducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, counter: state.counter + 1 }
    case "DECREMENT":
      return { ...state, counter: state.counter - 1 }
    case "ADD_NUMBER":
      return { ...state, counter: state.counter + action.num }
    case "SUB_NUMBER":
      return { ...state, counter: state.counter - action.num }
    default:
      return state;
  }
}

// store(创建的时候需要传入一个reducer)
const store = redux.createStore(reducer)

// 订阅store的修改
store.subscribe(() => {
  console.log("counter:", store.getState().counter);
})

// actions
const action1 = { type: "INCREMENT" };
const action2 = { type: "DECREMENT" };

const action3 = { type: "ADD_NUMBER", num: 5 };
const action4 = { type: "SUB_NUMBER", num: 12 };

// 派发action
store.dispatch(action1);
store.dispatch(action2);
store.dispatch(action2);
store.dispatch(action3);
store.dispatch(action4);

接下来只需要学习如何将其与react结合使用即可

初步结合使用：

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
    }
  }

  //监听订阅state的变化, 从而重新render, 使得界面更新(否则界面是不会自动更新的)
  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));
  }
}

但是有一个问题：因为使用的是redux，但是别的页面的数据并没有变化，是因为我们还得在别的页面中也去完成相同的逻辑，这也就引出了下面的问题。

react-redux封装过程（connect、context）

//connect函数的封装
import React, { PureComponent } from "react";

import { StoreContext } from './context';


//抛出去connect函数，需要传入两个参数，因为说过了， 每个组件所依赖的state和dispatch的事件有可能是不一样的。
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())
        }
      }


    /**
     * 大概的思路：在组件中dispatch action去到reducer中，reducer通过相应的操作，更新store中的state，
     * 而我已经提前在生命周期函数中监听store中数据的改变，一旦数据发生改变，setState便会触发render函数的执行
     */
      //组件一旦创建，便开始监听store中数据的改变；setState便会触发render函数的执行
      componentDidMount() {
        this.unsubscribe = this.context.subscribe(() => {
          this.setState({
            storeState: mapStateToProps(this.context.getState())
          })
        })
      }

      componentWillUnmount() {
        this.unsubscribe();
      }

      render() {
        //在这里动态添加上每个组件自己需要的state和dispatch事件，而这两个东西又不能写死，必须得通过组件你给我传递进来，最后再包裹时，不就又放回给自己了吗
        return <WrappedComponent {...this.props}
          {...mapStateToProps(this.context.getState())}
          {...mapDispachToProp(this.context.dispatch)} />
      }
    }

    EnhanceComponent.contextType = StoreContext;

    return EnhanceComponent;
  }
}

下面是业务代码，我们在封装connect函数时只需要考虑传入的state以及dispatch。

//业务代码
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函数，所以可以考虑将connect文件封装成一个单独的库，但是我们这个文件目前不够独立，因为它依赖了store这个业务文件，所以我们不能通过导入的方式了，我们便可以考虑使用context创建一个context对象并导出，然后在connect文件做一个导入，再在全局做一个共享，因为它拿到是自己项目中的store，将其传共享的value。

//context的封装
import React from 'react';

const StoreContext = React.createContext(); 

export {
  StoreContext
}

import React from 'react';
import ReactDOM from 'react-dom';

import store from './store';

// import { StoreContext } from './utils/context';
import { Provider } from 'react-redux';

import App from './App';

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

到这我们的封装就完成了，不过也可以继续优化什么的，但是我们也可以直接使用react-redux这个第三方库。

在使用这个第三方库时，我们只需要对其做一点点变化就行了：

//项目入口文件
import React from 'react';
import ReactDOM from 'react-dom';

import store from './store';

// import { StoreContext } from './utils/context';
import { Provider } from 'react-redux';

import App from './App';

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

//业务组件
// import { connect } from '../utils/connect';
import { connect } from 'react-redux';

redux组件中的异步操作

在之前的案例中，redux保存的是本地的数据，因此可以直接通过同步的操作直接dipatch action，state就会立马被更新。但是真实开发中，redux中保存的数据大多来自服务器，我们需要进行异步操作，再将数据保存到redux中。

componentDidMount() {
    axios({
      url: "http://123.207.32.32:8000/home/multidata",
    }).then(res => {
      const data = res.data.data;
      this.props.changeBanners(data.banner.list);
      this.props.changeRecommends(data.recommend.list);
    })
  }

而上面的代码有一个缺陷：我们必须将网络请求的异步代码放在组件的生命周期函数中完成，但是在redux中如何进行异步的操作呢？答案就是使用中间件。学习过express或者koa框架的对中间件的概念一定不陌生。中间件可以帮助我们在请求和响应之间嵌入一些操作的代码，比如：日志记录、文件压缩等操作。而我们将会利用中间件在dispatch action和reducer处理之间加入异步网络请求的操作。我们现在要做的就是发送异步的网络请求，所以我们可以添加对应的中间件：redux-thunk。

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

默认情况下的dispatch（action），action是一个js对象；

redux-thunk可以让dispatch（action），action可以是一个函数。

该函数会被调用，并且会传给这个函数一个dispatch函数和getState函数。

（1）dispatch函数用于我们之后再次派发action。

（2）getState函数考虑到我们之后的一些操作需要依赖原来的状态，用于让我们可以获取之前的一些状态。

redux-thunk的使用

//redux-thunk的引用
import { createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';

import reducer from './reducer.js';

// 应用一些中间件

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

export default store;

//action文件
// redux-thunk中定义的action函数
export const getHomeMultidataAction = (dispatch, getState) => {
  axios({
    url: "http://123.207.32.32:8000/home/multidata",
  }).then(res => {
    const data = res.data.data;
    dispatch(changeBannersAction(data.banner.list));
    dispatch(changeRecommendAction(data.recommend.list));
  })
}

//页面组件
class Home extends PureComponent {
  componentDidMount() {
      //发送网络请求
    this.props.getHomeMultidata();
  }

const mapDispatchToProps = dispatch => ({
  //提交给redux进行管理
  getHomeMultidata() {
    dispatch(getHomeMultidataAction);
  }
})

reducer的合并

import { reducer as counterReducer } from './counter';
import { reducer as homeReducer } from './home';

import { combineReducers } from 'redux';

//reducer应该是一个什么类型? function
const reducer = combineReducers({
  counterInfo: counterReducer,
  homeInfo: homeReducer
});

export default reducer;