Redux：使用同步調度更新商店

Question

我正在嘗試一個簡單示例，通過在componentWillMount()上調度更新商店的操作來呈現2個組件。

初始狀態：

export default { 
    dashboards: [], 
    dashboardContent: [] 
}; 

2個減速：

export default function dashboardContentReducer(state = initialState.dashboardContent, action) { 
    switch(action.type) { 
    case types.LOAD_DASHBOARD_CONTENT_SUCCESS: 
     return action.dashboardContent; 
    default: 
     return state; 
    } 
} 

和

export default function dashboardReducer(state = initialState.dashboards, action) { 
    switch(action.type) { 
    case types.LOAD_DASHBOARDS_SUCCESS: 
     return action.dashboards; 
    default: 
     return state; 
    } 
} 

這就是事情變得有點怪異。

我能夠調度行動來調用這些減速器，但只有其中一個將更新redux store。我這樣做如下：

class NavigationBar extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    componentWillMount() { 
    this.props.dispatch(dashboardActions.loadDashboards()); 
    } 

    render() { 
    return (
     <div className="rc-navigationBar"> 
     <h1>Navigation!</h1> 
      {this.props.dashboards.map((dashboard, index) => { 
      return <h1 key={index}>{dashboard.title}</h1> 
      })} 
     </div> 
    ); 
    } 
} 

及其他：

class ContentPage extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    componentWillMount() { 
    this.props.dispatch(dashboardContentActions.loadDashboardContent(extractIdFromRoute())); 
    } 

    render() { 
    return (
     <div> 
     <h1>Content!</h1> 
      {this.props.dashboardContent.map((content, index) => { 
      return <h1 key={index}>{content.application}</h1>; 
      })} 
     </div> 
    ); 
    } 
} 

當我同時嘗試修改店，我得到這個錯誤：

Uncaught (in promise) Error: A state mutation was detected between dispatches, in the path 'dashboards.1.filter.Pivot.ancestorOrigins'. This may cause incorrect behavior.

什麼時我在這裏做錯了嗎？

Answer 1

您正在以錯誤的方式返回它。它應該是這樣的 -

export default function dashboardContentReducer(state = default, action) { 
    switch(action.type) { 
    case types.LOAD_DASHBOARD_CONTENT_SUCCESS: 
       return Object.assign({}, state, { dashboardContent:action.dashboardContent }); 
    default: 
     return state; 
    } 
}