Wie kann man Reused Reducers Logic in React Komponenten einbauen?

Question

Ich benutze das Muster beschrieben here, die uns zeigen, wie Reducer Logik für andere ähnliche Zwecke wiederverwenden.

So ist mein Minderer Code wie dem folgenden Code:

function ContentFilterReducer(entity = ''){ 
    initialState.groupFilter = entity; 
    return function ContentFilterReducer(state = initialState, action) 
    { 

     // is the entity that we want to update? 
     if (action.item !== undefined && action.item.groupFilter !== entity) 
      return state; 

     switch (action.type) { 
      case ContentFilterTypes.ADD_ITEM: 
       return { 
        // we set the 
        groupFilter: action.item.groupFilter, 
        listObjects : state.listObjects.push(new Map({ 
         id: action.item.id, 
         description: action.item.description, 
         imgSrc: action.item.imgSrc 
        })) 
       } 

      default: 
       return state; 
     } 
    } 
} 

Mein combinedReducer ein Reduktionsmittel für jeden Zweck zu beschreiben, wie wir weiter unten sehen können:

const SearchReducers = combineReducers({ 
    // contains all allowed filters to be selected 
    UsersContentFilterReducer : ContentFilterReducer(Types.users), 
    OrganizationsContentFilterReducer : ContentFilterReducer(Types.organizations) 

}) 

Alles funktioniert groß aber ich würde gerne wissen, wie man es in eine React-Komponente unter Verwendung der Verbindung Funktion von React-Redux verbinden?

Wie wir sehen können, ich (ein einfaches Zeichen wie ‚a‘, ‚o‘, usw.) die Minderer Einstellung eine Einheit definieren und die spezifischen Minderer zu nennen, ich brauche nur stellen Sie die Einheit in meiner Aktion. Und jetzt ist das Problem, wie einen spezifischen Reduzierer für eine bestimmte darstellende Komponente anschließen?

Der folgende Code ist mein HOC-Container, der den Reducer mit einer bestimmten Komponente verbindet, der Code ist jedoch die alte Version, ohne zu definieren, welcher Reducer aufrufen soll.

const mapStateToProps = (state, action) => { 
    return { 
     contentList: ContentFilterReducer(state.ContentFilterReducer, action) 
    } 
} 

/** 
* 
* @param {contains the action that will be dispatched} dispatch 
*/ 
const mapDispatchToProps = (dispatch) => { 
    return { 
     onAddClick: (groupFilter, filterDescription, operator, value) => { 
      dispatch(AddFilter(groupFilter, filterDescription, operator, value)); 
     } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(ContentFilterField) 

Answer 1

Sie keine Minderer verbinden. Sie verbinden eine Komponente mit dem Redux Speicher. Ich werde meinen Zustand xxxReducer nicht nennen, es ist ein wenig verwirrend.

Ich bin mir nicht sicher, was Ihre Anwendung aussieht, für einen einfachen Fall, Sie müssen nur: (beide Zustand verbinden)

const mapStateToProps = (state) => { 
    return { 
    userContentList: state.SearchReducers.UsersContentFilterReducer, 
    organizationContentList: state.SearchReducers.OrganizationsContentFilterReducer, 
    } 
} 

Wenn Sie dynamisch zwischen usersContent und organizationsContent basierend wechseln möchten auf Ihrem Komponentenstatus, was Sie brauchen, ist eine selector Funktion.

Dies ist die offizielle redux Beispiel: https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/index.js#L10-L26

Diese Funktionen sind Selektoren, die Sie importieren und verwenden sie den Zustand, den Sie wollen zu bekommen.

So werden Sie so etwas wie getContentList erstellen und es nimmt eine type wie Types.users

const mapStateToProps = (state) => { 
    return { 
    // suppose you save current type saved in SearchReducers.type 
    contentList: getContentList(state.SearchReducers.type) 
    } 
} 

Auch der zweite Parameter von mapStateToProps ist ownProps nicht action.