Вложение / комбинирование комбинированных редукторов в редуксе

Question

Как объединить комбинированные редукторы, например, вот так ?:

export const streamsRootReducer = combineReducers({
    streamsPending: streamsPendingReducer,
    streams: streamsReducer,
    streamsError: streamsErrorReducer,
    streamsPageOffset: streamsPageOffsetReducer,
    streamsRefresh: streamsRefreshReducer
}); 

export const newsRootReducer = combineReducers({
    newsPending: newsPendingReducer,
    news: newsReducer,
    newsError: newsErrorReducer,
    newsRefresh: newsRefreshReducer
})

export const rootReducer = combineReducers({
    streamsRootReducer: streamsRootReducer,
    newsRootReducer: newsRootReducer
})

export type StreamsRootState = ReturnType<typeof streamsRootReducer>;
export type NewsRootState = ReturnType<typeof newsRootReducer>;

и в Магазине вот так:

import { rootReducer } from '../reducers/index';


const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware, reduxLogger];

const configureStore = () => {
    const store = createStore(
        rootReducer,
        compose(applyMiddleware(...middlewares))
    );
    sagaMiddleware.run(rootSaga);
    return store;
}

export default configureStore;

и на своих экранах я хочу сделать так:

...
const mapStateToProps = (state: NewsRootState) => ({
    newsPending: state.newsPending,
    news: state.news,
    newsError: state.newsError,
    newsRefresh: state.newsRefresh
})

export default connect(
    mapStateToProps,
    { fetchNewsPending, fetchNewsRefresh }
)(NewsScreen)

Я получаю ошибки, если я пытаюсь объединить уже объединенные редукторы, но объединение всех моих редукторов в одно объединение выглядит как беспорядок, потому что в конце моего проекта я хочу сделать подобное 2, объединенным у меня может быть 15-20 редукторов, я должен положить все в один rootReducer или я могу их как-то вкладывать, как в моем примере? Есть ли лучшее решение, чтобы сделать то, что я хотел?

Answer 1

Судя по всему, в вашем примере, когда вы в конечном итоге используете

export const rootReducer = 
combineReducers({
    streamsRootReducer: streamsRootReducer,
    newsRootReducer: newsRootReducer
})

... это на самом деле просто объединяет все редукторы вместе.

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

// imports here... then...

export const rootReducer = combineReducers({
    streamsPending: streamsPendingReducer,
    streams: streamsReducer,
    streamsError: streamsErrorReducer,
    streamsPageOffset: streamsPageOffsetReducer,
    streamsRefresh: streamsRefreshReducer,
    newsPending: newsPendingReducer,
    news: newsReducer,
    newsError: newsErrorReducer,
    newsRefresh: newsRefreshReducer
})

export type RootState = ReturnType<typeof rootReducer>

Будет ли это работать?