状态似乎被覆盖而不是合并
我目前正在尝试学习Redux，并且我认为我必须将它实现为错误，因为只有在页面上呈现的最后一个组件才能实际工作。 我怀疑每次都会覆盖状态。
我遵循本教程只使用了一个数据检索的例子，所以我可能只是误解了如何写入状态。
这是我的减速器。 任何想法，我错了？ 这一切似乎都非常冗长，是否有DRYer写出来的方式？
import Immutable from 'seamless-immutable';
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
// Import actions
import {
REQUEST_CONFIG,
GET_CONFIG,
REQUEST_PAGES,
GET_PAGES,
REQUEST_SOCIAL_LINKS,
GET_SOCIAL_LINKS,
REQUEST_NAV,
GET_NAV
} from './actions';
const configInitialState = Immutable({
items: [],
isFetching: false
})
const pagesInitialState = Immutable({
items: [],
isFetching: false
})
const socialLinksInitialState = Immutable({
items: [],
isFetching: false
})
const navInitialState = Immutable({
items: [],
isFetching: false
})
export function config(state = configInitialState, action) {
switch (action.type) {
case GET_CONFIG :
return Immutable(state).merge({
items: action.payload.config[0],
isFetching: false
})
case REQUEST_CONFIG :
return Immutable(state).merge({
isFetching: true
})
default:
return state;
}
}
export function pages(state = pagesInitialState, action) {
switch (action.type) {
case GET_PAGES :
return Immutable(state).merge({
items: action.payload.pages,
isFetching: false
})
case REQUEST_PAGES :
return Immutable(state).merge({
isFetching: true
})
default:
return state;
}
}
export function socialLinks(state = socialLinksInitialState, action) {
switch (action.type) {
case GET_SOCIAL_LINKS :
return Immutable(state).merge({
items: action.payload.socialLinks,
isFetching: false
})
case REQUEST_SOCIAL_LINKS :
return Immutable(state).merge({
isFetching: true
})
default:
return state;
}
}
export function nav(state = navInitialState, action) {
switch (action.type) {
case GET_NAV :
return Immutable(state).merge({
items: action.payload.nav,
isFetching: false
})
case REQUEST_NAV :
return Immutable(state).merge({
isFetching: true
})
default:
return state;
}
}
const rootReducer = combineReducers({
config,
pages,
socialLinks,
nav,
routing: routerReducer
});
export default rootReducer;
以防万一需要，以下是我的一个组件的示例：
import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { navLoad } from '../../../scripts/actions';
export default class HeaderNav extends React.Component {
componentWillMount() {
const { dispatch } = this.props;
dispatch(navLoad());
}
render() {
const { nav } = this.props;
const navitems = nav && nav.items ? nav.items.asMutable().map((item) => {
if(item.inNav === 'header' || item.inNav === 'both') {
return <li key={item._id}><Link to={item.slug}>{item.name}</Link></li>
}
}) : null;
if(nav.isFetching) {
return(
<section class="loader">
<span>Content is loading...</span>
</section>
)
} else {
return(
<nav class="c-primary-nav">
<span class="c-primary-nav_toggle">Menu</span>
<ul>
{ navitems }
</ul>
</nav>
)
}
}
}
function select(state) {
const { nav } = state;
return {
nav
};
}
export default connect(select)(HeaderNav);
这里是组件被调用的地方：
import React from 'react';
import HeaderNav from './Header/nav.jsx';
import SocialLinks from './Header/socialLinks.jsx';
export default class Header extends React.Component {
render() {
return(
<header class="c-global-header" role="banner">
<HeaderNav />
<SocialLinks />
</header>
)
}
}
更新：我仍然希望能够回答这个问题，因为它仍然困扰着我，现在我已经改变了一些代码，但无济于事。 你可以在这里看到我的完整代码库：https://github.com/alexward1981/portfolio-react（所有相关的东西都在'src'文件夹中）
我只是遇到同样的问题，问题是在reducer中，而不是默认开关情况下的返回状态部分，我返回initialState。
export const getAppShopReducer = (state = initialState, action) => {
switch (action.type) {
case types.FETCH_APP_SHOP_SUCCESS:
return state
.set('loading', false)
.set('user', action.payload.user)
.set('appShop', action.payload.appShop)
.set('shop', action.payload.shop)
;
case types.FETCH_APP_SHOP_REQUEST:
return initialState.set('loading', true);
default:
return state; // Here's the problem, it was `initialState`;
}
};
如果你的问题是你想在页面更新的时候获得一个组件的新数据，那么componentWillMount（）中的数据获取是不够的（因为它只在组件的第一次渲染时被调用）。
您还必须在另一个组件的生命周期方法componentWillReceiveProps（）中添加数据获取：
componentWillReceiveProps(nextProps) {
const { dispatch } = this.props;
dispatch(navLoad());
}
您可以添加一个适当的条件（比较nextProps与this.props）来检查是否真的需要在每次更新时获取新数据。
我不熟悉seamless-immutable，但是您的问题可能与您在reducer中的使用有关。 你确定这个库真的在状态发生变化时产生新的对象引用，因为它需要使用redux吗？
无论如何，你可能不得不使用更多的代码来正确地结合redux和无缝不变，就像这个库所做的那样。
为了简化事情，我认为你应该尝试使用普通的JS不变性模式（例如使用Object.assign（）或对象扩展语法），而不是无缝不可变。 例如，你可以这样写你的reducer：
const navInitialState = {
items: [],
isFetching: false
}
function nav(state = navInitialState, action) {
switch (action.type) {
case GET_NAV :
return {
...state,
items: action.payload.nav,
isFetching: false
}
case REQUEST_NAV :
return {
...state,
isFetching: true
}
default:
return state
}
}
上一篇: State seems to be getting overwritten instead of merged