3.2 redux结合react-redux使用

1.简介

react-redux是基于 容器组件和展示组件相分离 的开发思想。理解该思想文章

• 展示组件：用于页面展示，不与redux直接打交道，通过容器组件传递的props来获取redux里面state的数据
• 容器组件：相当于中间人，展示组件将redux数据以props属性传递给展示组件，当展示组件想修改redux数据则需要通过容器组件去派发

	展示组件	容器组件
作用	描述如何展现（骨架、样式）	描述如何运行（数据获取、状态更新）
直接使用 Redux	否	是
数据来源	props	监听 Redux state
数据修改	从 props 调用回调函数	向 Redux 派发 actions
调用方式	手动	通常由 React Redux 生成

2.实现

与redux实现区别之处在于将组件一分为二，展示组件和容器组件。展示组件不做redux操作，容器组件去和redux打交道。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux'
import { store } from './store'

ReactDOM.render(
  /**
   * 1.在根组件处传递store
   */
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);
reportWebVitals();

store/container/countContainer.js

import { connect } from 'react-redux'
import Count from '../../components/count';
import { incrementAction, incremnentAsyncAction } from '../actions/count';

/**
 * 该函数是返回展示组件需要获取的redux里面的state值。有两个参数 state和ownProps
 * state: redux里面的数据获取
 * ownProps: react原生的，父组件想子组件传递值可以在里面获取到
 * 返回值是一个对象：key 在展示组件中可以this.props.key获取
 * 注意：展示组件可以通过this.props获取的值是返回的对象与ownProps的组合。
 * 举个例子：父组件写了一个 father="张三"，ownProps就有该值，在展示组件中可以用this.props.father获取到(此函数返回对象中没有)
 */
const mapStateToProps = (state, ownProps) => {
  return { value: state.value };
}

/**
 * 该函数是展示组件通过函数回调想修改redux里面的值时用到，有两个参数dispatch, ownProps
 * dispatch： 就是store的dispatch
 * ownProps: 同上
 * 返回的是一个对象，key是展示组件回调方法的方法名，也是通过props传递到展示组件中，value是要执行的方法
 */
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increment: () => { dispatch(incrementAction()) },
    asyncIncrement: data => { dispatch(incremnentAsyncAction(data)) }
  }
}

/**
 * 2.创建容器组件，通过react-redux提供的connect方法实现
 * 第一个括号有两个参数： mapStateToProps,mapStateToProps
 * 第二个括号传递的是展示组件。
 */
export const CountContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(Count);

components/count/index.js

import React, { Component } from 'react'

export default class Count extends Component {

  /**
   * 3.展示组件：需要获取redux的值和修改redux的值都是通过this.props来实现
   */
  increment = () => {
    this.props.increment();
  }


  asyncIncrement = () => {
    this.props.asyncIncrement(2);
  }

  render() {
    const { value } = this.props;
    return (
      <div>
        <h4>当前数值为：{value}</h4>
        <button onClick={this.increment}>add</button>
        <button onClick={this.asyncIncrement}>syncadd</button>
      </div>
    )
  }
}