react dva 的 connect 與 @connect

connect 的使用

dva官方API connect

【connect 方法返回的也是一個 React 組件，一般稱爲容器組件。由於它是原始 UI 組件的容器，即在外面包了一層 State。connect 方法傳入的第一個參數是 mapStateToProps 函數，該函數須要返回一個對象，用於創建 State 到 Props 的映射關係。】

簡而言之，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',
        })
    }
}