combineReducers破壞Redux狀態，也打破多ImmutableJs減速器

Question

在這一點上抨擊我的頭。我已經瀏覽了典型的ReactJS和Redux應用程序，並正在開發我自己的應用程序。問題是使用combineReducers（）爲Redux商店創建單個縮減器時。我目前有三個減速器，它們在作爲createStore（）的減速器參數進行添加時可以很好地工作。第一減速器擁有所有我的行爲，被稱爲：

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（）組合它們時使用。第二減速器文件名爲：

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

記錄在推出存儲的狀態返回一個對象或列表，這取決於我用減速機。當我通過combineReducer（）運行它們時，我得到一個單獨的Object將每個Reducer保存在一起。什麼，立刻打破是.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

combineReducers不支持不可變。請嘗試redux-immutable組合減速器。

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來防止突變到您的狀態，你可以保持redux的正常組合減速器。