Redux connect() mit mehreren Aktionen/Zuständen

Question

Wie kann man mehrere Zustände mit entsprechenden Aktionserstellern in Redux verbinden? Und ist das überhaupt eine gute Idee? Wie kann ich das umgehen, wenn es eine dumme Idee ist?

export default connect(

// which part of the Redux global state does 
// our component want to receive as props? 
(state) => { 
    return { 
    state: state.instagram 
    }; 
}, 

// which action creators does 
// it want to receive by props? 
(dispatch) => { 
    return { 
    actions: bindActionCreators(instagramActions, dispatch) 
    }; 
} 

)(FeedContainer); 

Was ich im Grunde will, ist so etwas wie diese:

... 
state: {state.instagram, state.facebook} 
... 

... 
const mergedActions = {instagramActions, facebookActions}; 
actions: bindActionCreators(mergedActions , dispatch) 
... 

Answer 1

Nutzung des mitgelieferten Rückrufe mapStateTopProps und mapDispatchToProps ist der richtige Weg, um Ihre Komponente mit einer gefilterten Teilmenge Ihres Staates und bereits gebunden actionCreators zu verbinden.

Um das zu erreichen, was Sie wollen Sie einfach tun könnte:

(state) => { 
    const { instagram, facebook } = state; 
    return { 
    state: { instagram, facebook } 
    }; 
} 

und

(dispatch) => { 
    return { 
    actions: bindActionCreators(Object.assign({}, instagramActions, facebookActions), dispatch) 
    }; 
} 

arbeiten Dies gilt nicht:

actions: bindActionCreators({instagramActions, facebookActions} , dispatch) 

als die Methode verschachtelte Objekte noch nicht unterstützt . See code here. Es iteriert nur über die Schlüssel und sucht nach Funktionen.

Innerhalb Ihres mapDispatchToProps Rückruf Sie die zusätzliche Zustandsschicht entfernt mit

(state) => { 
    const { instagram, facebook } = state; 
    return { 
     instagram, 
     facebook 
    }; 
} 

Auf diese Weise können Sie die Requisiten zugreifen lassen könnte:

this.props.facebook und this.props.instagram statt this.props.state.facebook und this.props.state.instagram. Aber das ist nur eine Frage des Stils, denke ich.

Es gibt mehrere Möglichkeiten, den Status und den Versand an Requisiten zu binden. Am Ende ist es eine Frage des Stils. Ich könnte einige verschiedene Beispiele dafür anbieten, aber schauen Sie besser in die offizielle Dokumentation und finden Sie Ihren eigenen Stil https://github.com/reactjs/react-redux/blob/master/docs/api.md