react+redux笔记

发布于: 2019-04-02 16:12

此文章久未修订，请自行甄别内容准确性。

react本身做的事情大体是根据编写好的组件渲染出真实的DOM。
- 编写的组件可以是一个es6/typescript的class，也可以直接是个返回标签的函数。
- 组件通过props接收父级传入的值，通过state维护自己内部的值。
- 父级传入的props更改时会触发：componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate，最终更新界面值。
- 内部state更改时会触发：shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate，最终更新界面值。
- 组件本身通过setState更新state，以更新界面值。
- react本身封装好了标签的一些事件(onClick等)，也可以通过ref获取真实DOM的引用(componentDidMount中可访问到)。

redux本身做的事情大体是帮助维护一份单例的数据集(store)。
- 通过subscribe监听状态变化，getState获取当前状态。
- 通过reducer来决定不同action都会如何操作数据。
- 通过action来规范支持的操作。
- 通过dispatch方法来传入action。

至此可以这么使用react+redux：

const store = createStore(...)

class App extends Component{

  componentWillMount(){
    store.subscribe((state)=>this.setState(state))
  }
  
  render(){
    return <Comp state={this.state}
        onIncrease={()=>store.dispatch({type: 'ACTION1'})}
        onDecrease={()=>store.dispatch({type: 'ACTION2'})}
    />
  }
}

react-redux帮助react整合redux到自己的组件体系中。
- 直接解决的问题就是不用层层传入props来访问store了。
- 顶层包裹Provider组件并传入store来使用。
- Provider组件做的事是用Context维护一份store。
- 需要访问store的组件用connect来将状态和action注入到props中。

mapStateToProps是connect的第一个参数，帮助绑定状态到组件的props。
- 此函数返回的对象会被整合到组件props中。
- 函数第一个参数(state)为全局所有的reducer，即store中的数据
- 函数第二个参数(ownProps)为组件本身的props。
- 每当状态更新时最先触发mapStateToProps，随后走组件update四步。
- 组件本身传入的props更改不会触发mapStateToProps，但传入ownProps后就也会触发。

mapDispatchToProps是connect的第二个参数，帮助绑定action到组件的props。
- 也就是说现在可以在组件中调用action了。
- 执行action需要dispatch，但是可以用bindActionCreators来隐藏dispatch部分。

至此可以这么使用react+redux+react-redux：

const mapStateToProps = (state) => ({
  count: state.count,
})
const mapDispatchToProps = (dispatch, ownProps) => {
  return bindActionCreators({
    increase: action.increase,
    decrease: action.decrease,
  });
}

class MyComp extends Component {
  render(){
    const {count, increase, decrease} = this.props;
    return (<div>
      <div>计数：{this.props.count}次</div>
      <button onClick={increase}>增加</button>
      <button onClick={decrease}>减少</button>
    </div>)
  }
}

const Comp = connect(mapStateToProps, mapDispatchToProps)(MyComp);

connect后续两个参数之后再深究，其中第三个可以自定义状态如何merge到组件的props中。

参考链接：

上文示例代码搬迁自这里。
mapStateToProps, and why you may not need mapDispatchToProps when you start Redux

redux-thunk 异步的redux
- 可接收函数作为action，也就是先dispatch这个action发起异步操作。
- 在此函数中通过第一个参数(dispatch)调用其他action，以完成异步action效果。

redux-saga 异步的redux
- 在单独的saga模块中监听组件发起的action。
- 接收到组件action后执行异步方法，执行完成后再发起action到reducer。
- reducer接收到saga发起的action后返回新state到组件。
- saga对action的监听不影响reducer直接处理这个action，可以同时触发。
- 个人感觉像redux专用的小rx。

组件dispatch一个ActionA
saga监听到ActionA
执行异步逻辑
put一个ActionB到reducer
reducer返回新状态到组件

再見二丁目 | yitimo的个人博客

react+redux笔记