Welchen Weg soll ich für Connector in Redux verwenden?

Question

Ich habe 2 Möglichkeiten gesehen, das Gleiche zu tun, aber ich bin mir nicht sicher, was der richtige Weg ist.

Komponente

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

Oder

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> 
    } 
} 

https://github.com/learncodeacademy/react-js-tutorials/tree/master/5-redux-react

Der erste Weg verwendet 2 verschiedene Funktionen mapStateToProps() und matchDispatchToProps() während der anderen Verwendungen Art und Weise @connect(....).

Wenn ich @connect verwende, bekomme ich eine ganze Reihe von Warnungen, die sagen, dass es nicht abgeschlossen wurde und sich ändern könnte.

Answer 1

Das @ Symbol ist ein Dekorateur, der immer noch als experimentell gilt. Also würde ich das auf eigenes Risiko verwenden. Ihr erster Codeblock ist der sicherere Weg, wie in den offiziellen Dokumenten beschrieben. Beide Blöcke machen im Prinzip dasselbe, aber Dekorateure sind mehr Zucker als alles andere.

Referenzen:

• https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
• What's the '@' (at symbol) in the Redux @connect decorator?

Answer 2

Ich denke, die erste Methode wird Ihnen am Ende weniger Probleme geben. Ein anderer kann auch hineinspielen.

Answer 3

Die Antwort von Jackson rechts in jeder Hinsicht ist aber er ist die Bedeutung der erste Version der Verwendung für die Verwendung von Unit-Tests verpasst . Wenn Sie eine Komponente testen möchten (was normalerweise bedeutet, dass Sie mit der nicht verbundenen Version testen), müssen Sie die verbundene und nicht verbundene Komponente exportieren können.

Arbeiten mit dem Beispiel und unter der Annahme, Sie scherzen/Enzym verwenden Sie so etwas wie dies tun könnten:

// notice importing the disconnected component 
import { UserList } from '../relative/file/path/UserList' 
import { mount } from 'enzyme' 

describe('UserList',() => { 
    it('displays the Username',() => { 
    const users = [{fist: 'Person', last: 'Thing'}, ... ] 
    const UserList = mount(<UserList users={users} />) 

    export(UserList.find('li')[0].text()).toEqual('Person Thing') 
    }); 
}); 

Sobald Sie größere Projekte aufbauen, um Unit-Test in der Lage, wird geistige Gesundheit zu Ihrem Codierung Leben bieten. Hoffe, das hilft