использование зернокомбинации CombReducers () дает другой результат выполнения, чем один редуктор

Question

Я пытаюсь инициализировать базовое хранилище из корневого редуктора с начальным состоянием.

Мой корневой редуктор

import Entity from "../api/Entity";
import { UPDATE_GROUPING } from "../constants/action-types";
import IAction from "../interfaces/IAction";
import IStoreState from "../interfaces/IStoreState";

const initialState:IStoreState = {
  callsInProgress: false,
  groupingOptions: ["Strategy", "User", "Date"],
  groupingType: "Strategy",
  numberOfCalls: 2,
  items: [new Entity()],
};


const rootReducer = (state = initialState, action: IAction<object>) => {  
  switch (action.type) {
    case UPDATE_GROUPING:
      return { ...state, groupingType: action.payload};
    default:
      return state;
  }  
};

export default rootReducer;

Когда я создаю хранилище с корневым редуктором, как показано ниже

import { createStore } from 'redux';
import rootreducer  from '../reducers/rootreducer';

const store = createStore(rootreducer);
export default store;

Это работает.Компоненты React инициализируются с правильным состоянием для groupingType, groupingOptions и т. Д.

Однако, если я попытаюсь использовать подход combReducers () - даже с одним единственным корневым редуктором (должен быть идентичным), тогда когда мои компоненты загружаются, им не передано никакое начальное состояние.

т.е.

import { createStore } from 'redux';
import reducers  from '../reducers';

const store = createStore(reducers);
export default store;

Мои index.ts в папке редукторов, которая возвращает вызов combReducers () (тот, который не работает)

import {combineReducers} from 'redux';
import rootreducer from './rootreducer';

// main reducers
export default combineReducers({
  rootreducer
});

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

import updateGroupingType from "./actions/uiactions";
import './App.css';
import * as React from 'react';
import { connect } from 'react-redux';
import IStoreState from './interfaces/IStoreState';

interface IGroupingProps {
    groupingOptions? : string[],
    groupingType? : string,
    updateGroupingAction? : any
  }

class GroupingSelector extends React.Component<IGroupingProps, {}> {

    constructor(props: IGroupingProps) {
        super(props);

        this.onGroupingChange = this.onGroupingChange.bind(this);
      }

      public render() {
            if (this.props.groupingOptions == null)
            {
                return null;
            }

                return (
            <div className="Grouping-selector">
                <div className="Horizontal-panel-right Grouping-search-combo">
                    <select onChange={this.onGroupingChange}>
                        {this.props.groupingOptions.map((name, index)=> 
                            <option key={index}>{name}</option>
                        )}
                    </select>
                </div>
                <div className="Content Horizontal-panel-right">
                    Group by
                </div>            
            </div>);
        }

    private onGroupingChange(e: any) {
          const { value } = e.target;
          this.props.updateGroupingAction(value);
      }    
}

const mapStateToProps:any = (state: IStoreState) => {
    return {
        groupingOptions: state.groupingOptions,
        groupingType: state.groupingType,
    };
  }    

const mapDispatchToProps = (dispatch:any) => {
    return {
        updateGroupingAction: (groupingType:string) => dispatch(updateGroupingType(groupingType))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(GroupingSelector);

Почему мое использование combReducers не работает так же, как когда я используюоднокорневой редуктор?

Answer 1

Ваш корневой редуктор должен быть парой значений ключа, таких как,

export default combineReducers({
  home:homeReducer
});

, чтобы в вашем компоненте mapStateToProps () вы могли получить доступ к этим значениям как,

const mapStateToProps = (state: any) => {
  return {
    users: state.home
  };
};

Answer 2

Из документа

Вспомогательная функция объединениеReducers превращает объект, значения которого являются различными функциями сокращения, в одну функцию сокращения, которую можно передать в createStore.

Полученный результатreducer вызывает каждого дочернего редуктора и собирает их результаты в единый объект состояния.Состояние, создаваемое пространством имен combReducers (), помещает состояния каждого редуктора под их ключами в том виде, в котором они были переданы методе ОбъединитьReducers ()

Когда вы используете rootReducer в качестве ключа внутри вашего combReducers, он создаст состояние, форма которого будет

{"rootReducer": YOUR_PREVIOUS_STATE}

Вы должны использовать combReducers, только если у вас есть разные редукторы для каждой клавиши