Redux connect() z wieloma operacjami/stanami

Question

Jaki jest właściwy sposób łączenia wielu stanów z odpowiednimi kreatorami akcji w Redux? I czy to nawet dobry pomysł? Jak mogę to obejść, jeśli to głupi pomysł?

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); 

Co Chcę zasadniczo jest coś takiego:

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

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

Answer 1

pomocą dostarczonego Callbacki mapStateTopProps i mapDispatchToProps jest właściwy sposób, aby połączyć komponent z przefiltrowanego podzbioru swojego stanu i już związany actionCreators.

Aby osiągnąć to, co chcesz, możesz po prostu zrobić:

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

i

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

To nie działa:

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

jako metoda nie obsługuje jeszcze obiektów zagnieżdżonych . See code here. To tylko iteruje po klawiszach i szuka funkcji.

w swoim mapDispatchToProps callback można zostawić dodatkową warstwę stanu dala

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

W ten sposób można uzyskać dostęp do rekwizytów z:

this.props.facebook i this.props.instagram zamiast this.props.state.facebook i this.props.state.instagram. Ale myślę, że to tylko kwestia stylu.

Istnieje kilka sposobów wiązania państwa i wysyłki do rekwizytów. W końcu to kwestia stylu. Mogę podać kilka różnych przykładów tego, jak to zrobić, ale lepiej zajrzeć do oficjalnej dokumentacji i znaleźć swój własny styl, aby uzyskać własny styl https://github.com/reactjs/react-redux/blob/master/docs/api.md