Wie Übergeben Klasseninstanzen, um Kinder zu reagieren, ohne Aktualisierungen zu unterbrechen?

Question

In einer react-redux-App ist es die beste Vorgehensweise, Sammlungen von Aktionserstellern an untergeordnete Komponenten zu übergeben.

Um genauer zu sein Ich möchte eine Klasse haben, die Netzwerkanforderungen für mich ausführt. Ich möchte verschiedene Instanzen dieser Klasse für verschiedene Endpunkte erstellen. Die Methoden in dieser Klasse sind Aktions-Ersteller. Wie übergebe ich eine bestimmte Instanz dieser Klasse an meine Unterkomponenten, ohne redux connect shallow comparison zu unterbrechen? Muss ich die benutzerdefinierten Methoden von sollteComponentUpdate implementieren? Gibt es einen besseren Weg dies zu tun?

Answer 1

in der Regel Komponenten für eine bessere Wartbarkeit unterteilt: HOC(container) and presentatianal components..

, wenn Ihr Behälter Präsentations-Komponenten:

Sie brauchen nicht Ihre Aktionen Schöpfer durch Präsentationen Komponenten passieren, weil sie keins haben, sollten Kenntnis von Reduxteilen. Wenn die Präsentationskomponente eine Aktion auslöst, sollten Sie Callbacks verwenden, um den Versand im Container aufzurufen.

für die Verwendung von verschiedenen Instanzen der Aktion Schöpfer Klasse

ersten Weg

import ActionsClass from './Actions/ActionsClass'; 
const actions = ActionsClass('endpoint'); 

class Container extends Component {...} 
export default connect(state=>({foo:state.foo}),actions)(Container); 

zweite dynamische Art und Weise, vorbei Endpunkt durch Requisiten

import ActionsClass from './Actions/ActionsClass'; 
import { bindActionCreators } from 'redux' 

class Container extends Component {...} 

const mapDispatchToProps = (dispatch,ownProps)=>({ 
    actions: bindActionCreators(ActionsClass(ownProps.endpoint) , dispatch) 
}); 

export default connect(state=>({foo:state.foo}),mapDispatchToProps)(Container); 

ich denke, können Sie reselect verwenden für ActionsClass(ownProps.endpoint)

dritte dynamische Art und Weise ohne Klasse Aktion Endpunkt

import actions from './actions'; 

class Container extends Component { 
    onChange(arg1,arg2){ 
     this.props.someAction(arg1,arg2,this.props.endpoint) 
    } 
    render(){ 
     return(<SomeComp onChange={this.onChange.bind(this)}/> 
    } 
} 

export default connect(state=>({foo:state.foo}),actions)(Container); 

btw Endpunkt vorbei passieren, können Sie auch in den Filialen state=>({endpoint:state.endpoint})

vierten ... erhalten Endpunkt von Aktion Schöpfer, durch redux-thunk

const actionFetch = (notes) => (dispatch,getState)=>{ 
    let endpoint = getState()[notes].endpoint; 
    fetch(endpoint).then(... 
    //or let endpoint = endpointsFromModule[notes].fetchAll; 
}