redux 学习笔记

redux 学习笔记 

redux 中 react 组件执行顺序：
1.执行mapStateToProps；
2.render方法；
3.componentDidMount方法。

tips：当props发生改变，会依次执行上述方法。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchIssuesIfNeeded } from '../actions/index.js';
import CellView from '../components/CellView.js';

class All extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(fetchIssuesIfNeeded('created', 10000));
  }
  render() {
    if (this.props.isFetching) {
      return null;
    }

    return (
      <div className="list">
        <CellView title="全部" items={this.props.items} />
      </div>
    );
  }
};

function mapStateToProps(state) {
  const {
    isFetching,
    items
  } = state || {
    isFetching: true,
    items: []
  };

  return {
    isFetching,
    items
  }
}

export default connect(mapStateToProps)(All);

%23%20redux%20%u5B66%u4E60%u7B14%u8BB0%0A%0A@%28react%29%0A%0Aredux%20%u4E2D%20react%20%u7EC4%u4EF6%u6267%u884C%u987A%u5E8F%uFF1A%0A1.%u6267%u884CmapStateToProps%uFF1B%0A2.render%u65B9%u6CD5%uFF1B%0A3.componentDidMount%u65B9%u6CD5%u3002%0A%0Atips%uFF1A%u5F53props%u53D1%u751F%u6539%u53D8%uFF0C%u4F1A%u4F9D%u6B21%u6267%u884C%u4E0A%u8FF0%u65B9%u6CD5%u3002%0A%0A%60%60%60javascript%0Aimport%20React%2C%20%7B%20Component%20%7D%20from%20%27react%27%3B%0Aimport%20%7B%20connect%20%7D%20from%20%27react-redux%27%3B%0Aimport%20%7B%20fetchIssuesIfNeeded%20%7D%20from%20%27../actions/index.js%27%3B%0Aimport%20CellView%20from%20%27../components/CellView.js%27%3B%0A%0Aclass%20All%20extends%20Component%20%7B%0A%20%20componentDidMount%28%29%20%7B%0A%20%20%20%20const%20%7B%20dispatch%20%7D%20%3D%20this.props%3B%0A%20%20%20%20dispatch%28fetchIssuesIfNeeded%28%27created%27%2C%2010000%29%29%3B%0A%20%20%7D%0A%20%20render%28%29%20%7B%0A%20%20%20%20if%20%28this.props.isFetching%29%20%7B%0A%20%20%20%20%20%20return%20null%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20return%20%28%0A%20%20%20%20%20%20%3Cdiv%20className%3D%22list%22%3E%0A%20%20%20%20%20%20%20%20%3CCellView%20title%3D%22%u5168%u90E8%22%20items%3D%7Bthis.props.items%7D%20/%3E%0A%20%20%20%20%20%20%3C/div%3E%0A%20%20%20%20%29%3B%0A%20%20%7D%0A%7D%3B%0A%0Afunction%20mapStateToProps%28state%29%20%7B%0A%20%20const%20%7B%0A%20%20%20%20isFetching%2C%0A%20%20%20%20items%0A%20%20%7D%20%3D%20state%20%7C%7C%20%7B%0A%20%20%20%20isFetching%3A%20true%2C%0A%20%20%20%20items%3A%20%5B%5D%0A%20%20%7D%3B%0A%0A%20%20return%20%7B%0A%20%20%20%20isFetching%2C%0A%20%20%20%20items%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20connect%28mapStateToProps%29%28All%29%3B%0A%60%60%60