react dva 的 connect 与 @connect

 阅读约 6 分钟

connect 的使用

dva官方API connect

connect 方法返回的也是一个 React 组件,通常称为容器组件。因为它是原始 UI 组件的容器,即在外面包了一层 Stateconnect 方法传入的第一个参数是 mapStateToProps 函数,该函数需要返回一个对象,用于建立 StateProps 的映射关系。】

简而言之,connect接收一个函数,返回一个函数。

第一个函数会注入全部的models,你需要返回一个新的对象,挑选该组件所需要的models

export default connect(({ user, login, global = {}, loading }) => ({
    currentUser: user.currentUser,
    collapsed: global.collapsed,
    fetchingNotices: loading.effects['global/fetchNotices'],
    notices: global.notices
}))(BasicLayout);


// 简化版
export default connect( 
  ({ user, login, global = {}, loading }) => {
        return {
          currentUser: user.currentUser,
          collapsed: global.collapsed,
          fetchingNotices: loading.effects['global/fetchNotices'],
          notices: global.notices
        }
  }
)(BasicLayout);

@connect 的使用

其实只是connect的装饰器、语法糖罢了。

// 将 model 和 component 串联起来
export default connect(({ user, login, global = {}, loading }) => ({
    currentUser: user.currentUser,
    collapsed: global.collapsed,
    fetchingNotices: loading.effects['global/fetchNotices'],
    notices: global.notices,
    menuData: login.menuData,         // by hzy
    redirectData: login.redirectData, // by hzy
}))(BasicLayout);

// 改为这样(export 的不再是connect,而是class组件本身。),也是可以执行的,但要注意@connect必须放在export default class前面:
// 将 model 和 component 串联起来
@connect(({ user, login, global = {}, loading }) => ({
  currentUser: user.currentUser,
  collapsed: global.collapsed,
  fetchingNotices: loading.effects['global/fetchNotices'],
  notices: global.notices,
  menuData: login.menuData,         // by hzy
  redirectData: login.redirectData, // by hzy
}))

export default class BasicLayout extends React.PureComponent { 
   // ...
}

@ 修饰器

@es7加入的功能,现在已经有很多项目开始使用

修饰器是一个对类进行处理的函数。修饰器函数的第一个参数,就是所要修饰的目标类。

例如在你以前的react项目中,用了react-redux你是这么写connect的:

const mapStateToProps = state => {
  return {
    user: state.user.user
  };
};

const mapDispatchToProps = (dispatch) => ({
  usersAction: bindActionCreators(userAction, dispatch),
  dispatch: dispatch
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);

那么现在用上es7的修饰器,你可以改成这样:

@connect(state => ({
    user: state.user.user,
  }),
  dispatch => ({
    ...bindActionCreators({
      usersAction: usersAction
    }, dispatch)
  })
)
export default class Main extends Component {

}

当然,如果你用dva或者redux-saga,你甚至不用在connect里写dispatch,可以这么写

@connect(state => ({
    user: state.user.user,
  }),
)
export default class Main extends Component {
    componentDidMount () {
        this.props.dispatch({
            type: 'user/saveUser',
        })
    }
}
阅读 821更新于 9月5日
推荐阅读
目录