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;

你可能感兴趣的:(reactjs)