redux connect高阶函数原理

https://www.jianshu.com/p/4af924709b35 https://www.redux.org.cn/docs/react-redux/api.html#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

原理解析

首先connect之所以会成功，是因为Provider组件：

• 在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
• 接收Redux的store作为props，通过context对象传递给子孙组件上的connect

  那connect做了些什么呢？

  它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件。

connect是一个高阶函数，首先传入mapStateToProps、mapDispatchToProps，然后返回一个生产Component的函数(wrapWithConnect)，然后再将真正的Component作为参数传入wrapWithConnect，这样就生产出一个经过包裹的Connect组件，被包裹的组件就可以使用this.props获取包裹组件的属性。

antdpro demo

分步表单

文件目录

index.js

import { Card, Steps } from 'antd';
import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import Step3 from './components/Step3';
import styles from './style.less';
const { Step } = Steps;
class GiftSetting extends Component {
  getCurrentStep() {
    const { current } = this.props;
    switch (current) {
      case 'info':
        return 0;
      case 'confirm':
        return 1;
      case 'result':
        return 2;
      default:
        return 0;
    }
  }
  render() {
    const currentStep = this.getCurrentStep();
    let stepComponent;
    if (currentStep === 1) {
      stepComponent = <Step2 />;
    } else if (currentStep === 2) {
      stepComponent = <Step3 />;
    } else {
      stepComponent = <Step1 />;
    }
    return (
      <PageHeaderWrapper content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。">
        <Card bordered={false}>
          <>
            <Steps current={currentStep} className={styles.steps}>
              <Step title="填写转账信息" />
              <Step title="确认转账信息" />
              <Step title="完成" />
            </Steps>
            {stepComponent}
          </>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
const mapStateToProps = ({ giftSystemAndgiftSetting }) => {
  console.log(giftSystemAndgiftSetting, "--------")
  return {
    current: giftSystemAndgiftSetting.current,
  }
}
export default connect(
  mapStateToProps
)
  (GiftSetting);

model

import { fakeSubmitForm } from './service';

const Model = {
  namespace: 'giftSystemAndgiftSetting',
  state: {
    current: 'info',
    step: {
      payAccount: 'ant-design@alipay.com',
      receiverAccount: 'test@example.com',
      receiverName: 'Alex',
      amount: '500',
    },
  },
  effects: {
    *submitStepForm({ payload }, { call, put }) {
      yield call(fakeSubmitForm, payload);
      yield put({
        type: 'saveStepFormData',
        payload,
      });
      yield put({
        type: 'saveCurrentStep',
        payload: 'result',
      });
    },
  },
  reducers: {
    saveCurrentStep(state, { payload }) {
      return { ...state, current: payload };
    },

    saveStepFormData(state, { payload }) {
      return { ...state, step: { ...state.step, ...payload } };
    },
  },
};
export default Model;

关联

经过connect包裹后就可以通过props来获取关联的store里的数据

通过解构获取相应的namespace下的数据，

({ giftSystemAndgiftSetting }) => {
  console.log(giftSystemAndgiftSetting, "--------")
}

当修改名称使其与store中命名空间不匹配的时候，值也拿不到咯。

const mapStateToProps = ({ giftSystemAndgiftSetting1 }) => {
  console.log(giftSystemAndgiftSetting1, "--------")
}

return 返回给谁

当吧retur注释掉后可以看到虽然状态变了，但视图并没有响应。

const mapStateToProps = ({ giftSystemAndgiftSetting1 }) => {
  console.log(giftSystemAndgiftSetting1, "--------")
  // return {
  //   current: giftSystemAndgiftSetting.current,
  // }
}