外部APIからReduxストアを更新する

Question

私は現在、React with Reduxでデータ管理システムとしてアプリケーションを構築しています。私は、Webソケットからのイベントディスパッチ時に、アプリケーション（Webページ）内のコンポーネントを更新する必要がある問題に遭遇しました。フローは次のようになります。

しかし、フローの途中と最後の部分が失われています。アクションが呼び出されると、ダッシュボードはではなく、が再作成/再描画されます。

私はReactとReduxを全く新しくしています。

Store.js

import { applyMiddleware, createStore } from 'redux'; 

import {createLogger} from "redux-logger"; 
import thunk from 'redux-thunk' 
import promise from 'redux-promise-middleware' 


import reducers from './reducers'; 

const middleware = applyMiddleware(promise(), thunk, createLogger()); 

export default createStore(reducers, middleware); 

DashboardReducer.js

const initState = { 
dashboard: [], 
fetching: false, 
fetched: false, 
error: null 
} 
export default function reducer(state = initState, action) { 
    switch (action.type) { 
    case "FETCH_DASHBOARD": 
    { 
     return { 
     ...state, 
     fetching: true 
    } 
    } 
    case 'FETCH_DASHBOARD_REJECTED': 
    { 
     return { 
     ...state, 
     fetching: false, 
     error: action.payload 
     } 
    } 
    case 'FETCH_DASHBOARD_FULFILLED': 
    { 
     return {fetching: false, fetched: true, dashboard:action.payload.dashboard} 
    } 
    case 'UPDATEING_SYSTEM': 
    { 
     return Object.assign({}, state, {dashboard: action.payload.dashboard}); 
    } 
    default: 
    break; 
} 
return state; 
} 

DashboardActions.js

import io from 'socket.io-client' 
    import UniversalCookie from 'universal-cookie'; 
    const cookies = new UniversalCookie(); 
    //CHANGE URL FOR PRODUCTION 
    //----------------------------------------- 
    const socket = io.connect('http://localhost:8080'); 
    //----------------------------------------- 
    export function fetchDashboard() { 
    return function(dispatch) { 
     socket.emit("get dashboard", {cookie:cookies.get("**********")}); 
     socket.on("return dashboard", function(jDashboard) { 
    dispatch({ 
     type: 'FETCH_DASHBOARD_FULFILLED', 
     payload: { 
     dashboard: jDashboard.dashboard 
     } 
    }); 
    }); 
    socket.on("errored", function(data) { 
    console.log(data); 
    dispatch({type: 'FETCH_DASHBOARD_REJECTED', payload: data}); 
    }); 
    socket.on("updating systems", function(data) { 
    console.log("updating...", data); 
    dispatch({ 
     type: 'UPDATEING_SYSTEMS', 
     payload: { 
     dashboard: data.updatedSystems 
     } 
    }); 
    }); 
} 
} 

ダッシュボードコンポーネント

import React, {Component} from 'react'; 
import './Dashboard.css'; 
import CollectionContainer from '../CollectionContainer/CollectionContainer'; 
import {fetchDashboard} from '../../actions/dashboardAction'; 
import {connect} from "react-redux"; 

@connect((store) => { 
    return {dashboard: store.dashboardReducer.dashboard}; 
}) 
export default class Dashboard extends Component { 
    componentWillMount() { 
    this.props.dispatch(fetchDashboard()); 
    } 

    render() { 
    return (
     <div className="App"> 
     <div className="Head">HEADER</div> 
     <div className="CollectionContainer"> 
      <CollectionContainer dashboard={this.props.dashboard}/> 
     </div> 
     </div> 
    ); 
    } 
} 

開発ツールが

を切り取ら私はこの問題は、減速にあると思いますが、私はよく分かりません。

最適なシナリオは、影響を受ける状態のサブオブジェクトのみを更新することです。現在のところ、州のダッシュボード支柱全体が変更されています。

UPDATE

は、私は今、コードの周りを少しいじってきた、そして私がする必要がある「システム」を見つけることが容易になるよう、私はより多くのデータを与えるために、バックエンドサーバを変更しました変化する。さて、実際に状態を変更するのに問題が来る。これは私が今

DashboardReducer.js

const initState = { 
    dashboard: [], 
    fetching: false, 
    fetched: false, 
    error: null 
} 
export default function reducer(state = initState, action) { 
    switch (action.type) { 
    case "FETCH_DASHBOARD": 
     return { 
     ...state, 
     fetching: true 
     } 

    case 'FETCH_DASHBOARD_REJECTED': 
     return { 
     ...state, 
     fetching: false, 
     error: action.payload 
     } 

    case 'FETCH_DASHBOARD_FULFILLED': 
     return {fetching: false, fetched: true, dashboard: action.payload.dashboard} 

    case 'UPDATEING_SYSTEM': 
     let shelveNr = action.payload.dashboard[0].shelve; 
     let collectionNr = action.payload.dashboard[0].collection; 
     let systemNr = action.payload.dashboard[0].system; 
     let status = action.payload.dashboard[0].status; 
     console.log(" Status: ", state.dashboard[shelveNr]); 
     let newState = Object.assign({}, state, { 
     ...state.dashboard[shelveNr].Collections[collectionNr].systems[systemNr].status, 
     status: status 
     }); 
     return newState; 

    default: 
     return state; 
    } 
} 

Answer 1

あなたのアクションタイプ'UPDATEING_SYSTEMS'しかし、あなたの減速にあなたは'UPDATEING_SYSTEM'を持っているを持っているものです。また、中括弧は必要ありません。

caseあなたは完全にダッシュボードのデータを交換する、アクション `UPDATEING_SYSTEM`で

case 'UPDATEING_SYSTEMS': 
    return Object.assign({}, state, {dashboard: action.payload.dashboard});