Dynamisch Generieren von Redux Reducern

Question

Ich bin ein wenig verwirrt darüber, wie Reducer in Redux dynamisch erstellt werden. Ich habe ein paar Stackoverflow-Fragen zu diesem Thema gefunden, aber sie scheinen verschiedene Anwendungsfälle abzudecken und ich bin bedauerlicherweise mit den vorgeschlagenen Lösungen verwechselt.

Hier ist mein Anwendungsfall. Ich habe eine Palette von React DnD-Komponenten für den Benutzer verfügbar. Wenn der Benutzer eine Komponente auf den angegebenen Drop-Bereich zieht, erstelle ich ein einfaches Div für eine visuelle Darstellung und als Referenz. Die Komponente wird eine ID als Props enthalten und wenn sie gelöscht wird, füge ich die ID zum div hinzu und ich möchte einen neuen Reducer für die fallengelassene Komponente mit der Komponenten ID als Attribut für das globale Statusobjekt erstellen.

Diese ID wird das Attribut auf dem globalen Statusobjekt dem Div auf der UI zuordnen.

Ich kann etwas die Lösungsanbieter hier folgen, aber ich habe verloren, wenn ich zum routes.js Abschnitt kommen: How to dynamically load reducers for code splitting in a Redux application?

Dies ist, wie ich immer meine Reduzierungen strukturiert haben. Kann ich irgendwie neue Reducer dynamisch mit dieser Struktur erzeugen?

Reduzierungen/index.js

import { combineReducers } from 'redux'; 
import usersReducer from './users_reducer.js'; 

const rootReducer = combineReducers({ 
    users: usersReducer 
}); 

export default rootReducer; 

Reduzierungen/users_reducer.js

import { 
    FETCH_USERS 
} from '../actions/types'; 

const INITIAL_STATE = { all: [], user: {} }; 

export default function(state = { INITIAL_STATE }, action) { 

    switch (action.type) { 
     case FETCH_USERS: 
      return {...state, all: action.payload }; 
     default: 
      return state; 
    } 

} 

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import { Router, browserHistory } from 'react-router'; 
import reducers from './reducers'; 
import routes from './routes.js'; 
import promise from 'redux-promise'; 
import reduxThunk from 'redux-thunk'; 
import logger from 'redux-logger'; 

const createStoreWithMiddleware = applyMiddleware(
    reduxThunk, 
    logger() 
)(createStore); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <Router history={browserHistory} routes={routes}/> 
    </Provider> 
    , document.querySelector('#app') 
); 

Alle ein wie ich diesen Fluss gestalten sollte, wäre sehr zu begrüßen!

Answer 1

Die dynamische Generierung von Reduzierern ist nur für die Codeaufteilung nützlich, wenn der Reduzierercode bei der Erstellung Ihres Geschäfts noch nicht vorhanden ist. In Ihrem Fall würde ich ein Reduzierstück für die DnD-Komponenten montieren und den Zustand wie folgt modellieren:

{ 
    users: { all: [], user: {} }, 
    dnd: { all: [], components: {} }, 
}