敲我的头。我已经熟悉了典型的 ReactJS 和 Redux 应用程序,并且正在开发自己的应用程序。问题是当使用 combineReducers() 为 Redux 存储创建单个 reducer 时。我目前有三个减速器,当它们作为 createStore() 的减速器参数添加时,它们本身可以正常工作。第一个 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
}
}
第二个和第三个 reducer 是使用 ImmutableJS 构建的,用于为单独的列表传播一些虚拟内容。同样,这些减速器单独工作,但在 combineReducers() 组合它们时不会。第二个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
}
}
我通过 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);
在启动时记录存储的状态会返回一个对象或列表,具体取决于我使用的减速器。当我通过 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)
控制台显示“_ListItems.map 不是函数”。我已经完成并尝试编辑 mapStateToProps 返回值,但我抓住了稻草。感谢您阅读本文。任何帮助绝对值得赞赏。