CombReducers destroys Redux state, and also breaks multi-reducers ImmutableJs

Question

Hope so. I exploded through typical ReactJS and Redux applications and am working on my own application. The problem is using combReducers () to create a single reducer for the Redux store. Currently, I have three reducers that themselves work great when added as reducer parameters for createStore (). The first gearbox performs all my actions and is called:

Headerreducer

import { isActive } from '../actions/HeaderActions';

export const initialButtonState = {
  isActive: false,
  invertStyles: false
}

export default (state = initialButtonState, action) => {
  switch (action.type) {
    case 'SET_ACTIVE':
      return {
        ...state,
        isActive: action.isActive(state),
        invertStyles: action.invertStyles(state),
      }

    default:
      return state
  }
}

The second and third reducers are built using ImmutableJS to distribute some dummy content to individual lists. Again, individually, these reducers work independently, but not when combReducers () combines them. The second gear file is called:

ListItems

import Immutable from 'immutable';

const messagesList = Immutable.List(['9:00AM - 9:30AM','10:30AM -     11:30AM','11:45AM - 12:30PM','1:00PM - 2:15PM','3:00PM - 4:00PM']);

export default (state = messagesList, action) => {
  switch(action.type) {
    case 'addItem':
      return state.push(action.item)
    case 'deleteItem':
      return state.filter((item, index) => index !== action.index)
    default:
      return state
  }
}

:

QuotesList

import Immutable from 'immutable';

const quotesList = Immutable.List(['Company A: 100.00$','Company B:     200.00$','Company C: 300.00$','Company D: 400.00$','Company E: 500.00$<']);

export default (state = quotesList, action) => {
  switch(action.type) {
    case 'addItem':
      return state.push(action.item)
    case 'deleteItem':
      return state.filter((item, index) => index !== action.index)
    default:
      return state
  }
}

, index.js :

index.js

export { default as HeaderReducers } from './HeaderReducers';
export { default as ListItems } from './MessageList';
export { default as QuotesList } from './QuotesList';

:

Store.js

import { createStore, combineReducers } from 'redux';
import * as reducers from '../reducers';
// import HeaderReducers from '../reducers/HeaderReducers';
// import ListItems from '../reducers/MessageList';
// import QuotesList from '../reducers/QuotesList';

// let reducer = combineReducers({ ListItems: ListItems, quotes:     QuotesList})

// export default createStore(ListItems)

const reducer = combineReducers(reducers);
export default createStore(reducer);

, . combReducer(), , . , , .map, ListItems.js

import React from 'react';
import { connect } from 'react-redux';
import NewItem from './NewItem';
import { addItem, deleteItem } from '../../../actions/HeaderActions';
    const ListItems = ({ListItems, dispatch}) => (
      <div>
        <ul>
          {ListItems.map((ListItem, index) => <li><span key={index}>    {ListItem} <button onClick={e => {
            dispatch(deleteItem(index))
          }}>X</button></span></li>)}
        </ul>

        <NewItem />
      </div>
    )
function mapStateToProps(ListItems) {
  return {
    ListItems,
  }
}
export default connect(mapStateToProps)(ListItems)

, "_ListItems.map ". mapStateToProps, . , . .

Answer 1

combinationReducers . redux-immutable combReducers.

Answer 2

, , redux-immutable:

import {
  combineReducers
} from 'redux-immutable';

import {
  createStore
} from 'redux';

const initialState = Immutable.Map();
const rootReducer = combineReducers({});
const store = createStore(rootReducer, initialState);

, , , , , , , , .

, ImmutableJS , , ( ), , Object.freeze, , .