Reactjs CombineReducer破坏Redux状态,也破坏多个ImmutableJs还原器
在这上面撞我的头。我已经完成了典型的ReactJS和Redux应用程序测试,正在开发自己的应用程序。问题在于使用combineReducers()为Redux存储创建单个缩减器时。我目前有三个reducer,当添加为createStore()的reducer参数时,它们自己可以正常工作。第一个减速机包含我的所有操作,称为: 校长Reactjs CombineReducer破坏Redux状态,也破坏多个ImmutableJs还原器,reactjs,state,redux,reducers,react-redux,Reactjs,State,Redux,Reducers,React Redux,在这上面撞我的头。我已经完成了典型的ReactJS和Redux应用程序测试,正在开发自己的应用程序。问题在于使用combineReducers()为Redux存储创建单个缩减器时。我目前有三个reducer,当添加为createStore()的reducer参数时,它们自己可以正常工作。第一个减速机包含我的所有操作,称为: 校长 import { isActive } from '../actions/HeaderActions'; export const initialButtonStat
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
}
}
第二个和第三个reducer是使用ImmutableJS构建的,用于为单独的列表传播一些虚拟内容。同样,这些减速机各自独立工作,但当CombineReducer()将它们合并时不会工作。第二个reducer文件称为:
列表项
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
}
}
第三个文件称为:
报价单
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
}
}
然后打电话在以下位置创建我的店铺:
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()运行它们时,会返回一个对象,将每个减速机放在一起。立即中断的是我在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)
从“React”导入React;
从'react redux'导入{connect};
从“./NewItem”导入NewItem;
从“../../../actions/HeaderActions”导入{addItem,deleteItem};
常量ListItems=({ListItems,dispatch})=>(
{ListItems.map((ListItem,index)=>- {ListItem}{
发送(删除项目(索引))
}}>X
)}
)
函数MapStateTops(列表项){
返回{
清单项目,
}
}
导出默认连接(MapStateTops)(列表项)
控制台显示“\u ListItems.map不是函数”。我已经检查并尝试编辑mapStateToProps返回值,但我正在抓住救命稻草。谢谢你阅读这篇文章。非常感谢您的帮助。combineReducers不支持不可变。请尝试使用合并还原程序。合并还原程序不适用于不可变结构,需要进行协调以检测更改,您可以使用: 我最近在工作中的一个项目中使用了它,但是看看你的代码,我会说,通常来说,拥有不可变和可变状态是个坏主意,你应该用简单的结构或完全不可变来保持它
尽管ImmutableJS很棒,但它没有直接集成到语言中(它是一个用户库)这一事实可能会导致非常详细的代码库,另一种替代方法是使用它来防止状态发生变化,这样您就可以使常规的合并还原程序不受redux的影响。我的两个还原程序是不可变的。一个不是。如何组合所有的减缩器,不可变还是不可变?我自己从未尝试过,我确信这一点,但我认为必须将减缩器转换为不可变。
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)
import {
combineReducers
} from 'redux-immutable';
import {
createStore
} from 'redux';
const initialState = Immutable.Map();
const rootReducer = combineReducers({});
const store = createStore(rootReducer, initialState);