combineReducersはRedux状態を破壊し、複数のImmutableJsレデューサーも破損します

Question

これに私の頭を向けています。私は典型的なReactJSとReduxアプリのツイートを吹き飛ばし、自分のアプリで作業しています。問題は、combinedReducers（）を使用してReduxストア用の単一の縮小を作成する場合です。私は現在、createStore（）の減速パラメータとして追加されたときに、3つの減速機を単独で動作させています。最初の減速が保持している私の行動の全てと呼ばれている：

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 
    } 
} 

第二と第三減速は、別々のリストのためのいくつかのダミーのコンテンツを伝播するImmutableJSを使用して構築されています。繰り返しになりますが、これらのレデューサーはそれぞれ単独で動作しますが、combineReducers（）がそれらを組み合わせた場合は動作しません。第二減速ファイルが呼び出されます。

のListItem

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 
    } 
} 

3番目のファイルが呼び出されます。

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); 

私が使用して減速に応じて、オブジェクトまたはリストを返します。 combineReducer（）でそれらを実行すると、各レデューサーをまとめて保持している単一のObjectが返されます。どのようなすぐに壊れることは私が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) 

コンソールで設定している.MAP機能は「_ListItems.mapは関数ではありません」と表示されます。私は行ってmapStateToPropsの戻り値を編集しようとしましたが、私はストローを掴んでいます。これを読んでくれてありがとう。どんな助けもありがとうございます。

Answer 1

combineReducersは不変をサポートしていません。代わりにredux-immutable combineReducersを試してください。

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を使用して、あなたはレギュレターからレギュラーコンバインレデューサーを保つことができます。