Question

对此持怀疑态度。我已经浏览了典型的ReactJS和Redux应用程序，我正在开发自己的应用程序。问题是当使用combineReducers（）为Redux存储创建单个reducer时。我目前有三个reducer，当它们作为createStore（）的reducer参数添加时，它们可以正常工作。第一个reducer控制着我的所有动作，并被称为：

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构建第二个和第三个reducer，以便为单独的列表传播一些虚拟内容。同样，这些减速器单独工作，但是当combineReducers（）将它们组合在一起时却不能。第二个reducer文件名为：

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

我通过reducers文件夹中的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);

在启动时记录商店的状态会返回一个Object或List，具体取决于我使用的reducer。当我通过combineReducer（）运行它们时，我得到一个返回的Object，将每个reducer放在一起。立即中断的是我在ListItems.js中设置的.map函数

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)

控制台显示＆＃34; _ListItems.map不是函数＆＃34;。我已经完成并尝试编辑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);

我最近在其中一个项目中使用了这个，但是看看你的代码我会说拥有不可变和可变状态通常是一个坏主意，你应该保持它简单的结构或完全不可变。 / p>

尽管ImmutableJS很棒，但事实上这并没有直接集成到语言中（它是一个用户库）可能导致非常冗长的代码库，另一种选择是使用Object.freeze来防止变异状态和那种方式你可以保持常规联合减速器来自redux。

combineReducers破坏了Redux状态，并且还打破了多个ImmutableJs reducer

2 个答案: