在Redux中我应该使用哪种方式作为连接器？

Question

我看到了两种做同样事情的方法，但我不确定什么是正确的方法。

组件

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {selectUser} from '../actions/index'


class UserList extends Component {

    renderList() {
        return this.props.users.map((user) => {
            return (
                <li
                    key={user.id}
                    onClick={() => this.props.selectUser(user)}
                >
                    {user.first} {user.last}
                </li>
            );
        });
    }

    render() {
        return (
            <ul>
                {this.renderList()}
            </ul>
        );
    }

}

// Get apps state and pass it as props to UserList
//      > whenever state changes, the UserList will automatically re-render
function mapStateToProps(state) {
    return {
        users: state.users
    };
}

// Get actions and pass them as props to to UserList
//      > now UserList has this.props.selectUser
function matchDispatchToProps(dispatch){
    return bindActionCreators({selectUser: selectUser}, dispatch);
}

// We don't want to return the plain UserList (component) anymore, we want to return the smart Container
//      > UserList is now aware of state and actions
export default connect(mapStateToProps, matchDispatchToProps)(UserList);

https://github.com/buckyroberts/react-redux-boilerplate

import React from "react"
import { connect } from "react-redux"

import { fetchUser } from "../actions/userActions"
import { fetchTweets } from "../actions/tweetsActions"

@connect((store) => {
  return {
    user: store.user.user,
    userFetched: store.user.fetched,
    tweets: store.tweets.tweets,
  };
})
export default class Layout extends React.Component {
  componentWillMount() {
    this.props.dispatch(fetchUser())
  }

  fetchTweets() {
    this.props.dispatch(fetchTweets())
  }

  render() {
    const { user, tweets } = this.props;

    if (!tweets.length) {
      return <button onClick={this.fetchTweets.bind(this)}>load tweets</button>
    }

    const mappedTweets = tweets.map(tweet => <li>{tweet.text}</li>)

    return <div>
      <h1>{user.name}</h1>
      <ul>{mappedTweets}</ul>
    </div>
  }
}

第一种方法使用两个不同的函数MapStateToProps()和MatchDispatchToProps()，而另一种方法使用@Connect(...)

当我使用@Connect时，我会收到一大堆警告，说它还没有最终完成，可能会更改。

Answer 1

@符号是一个仍被认为是实验性的修饰符。所以我会用它来承担你的风险。您的第一个代码块是按照官方文档中描述的更安全的方法。这两个街区本质上都做着同样的事情，但装饰者比任何东西都更重要。

参考资料：

• https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectMapStateToprops-mapDispatchToprops-mergeprops-options
• Redux@Connect装饰程序中的“@”（at符号）是什么？