2016-08-19 5 views
2

Я немного запутался в том, как динамически создавать редукторы в Redux. Я нашел несколько вопросов Stackoverflow по этой теме, но они, похоже, охватывают разные варианты использования, и я с сожалением смешиваюсь с предлагаемыми решениями.Динамически генерировать Redux Reducers

Вот мой прецедент. У меня есть поддон компонентов React DnD, доступных пользователю. Когда пользователь перетаскивает компонент в указанную область выделения, я создаю простой div для визуального представления и для справки. Компонент будет содержать идентификатор в качестве реквизита, а когда он будет удален, я добавлю идентификатор в div, и я хочу создать новый редуктор для упавшего компонента с идентификатором компонентов как атрибутом глобального объекта состояния.

Этот идентификатор будет отображать атрибут объекта глобального состояния в div на ui.

Я могу несколько следовать поставщика решения, но я теряюсь, когда я пришел в секцию routes.js: How to dynamically load reducers for code splitting in a Redux application?

Это, как я всегда структурировано мои восстановителей. Могу ли я каким-то образом генерировать новые редукторы динамически, используя эту структуру?

редукторы/index.js

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

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

export default rootReducer; 

редукторы/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') 
); 

любого а dvice о том, как я должен заниматься структурированием этого потока, будем очень благодарны!

ответ

1

Динамически генерирующие редукторы полезны только для разложения кода, когда код восстановления еще не создан при создании вашего магазина. В вашем случае я смонтировал редуктор для компонентов DnD и смоделировал бы состояние, подобное:

{ 
    users: { all: [], user: {} }, 
    dnd: { all: [], components: {} }, 
} 
Смежные вопросы