从外部API更新Redux店面

Question

我目前正在使用Redux作为数据管理系统构建React应用程序。我遇到了一个问题，我需要在从web-socket派发事件时更新应用程序（网页）中的组件。流程如下：

API Server push change -> Redux action is called -> Component that is effected by this update, is rebuild/re rendered. 

但是流的中间和最后部分是我迷路的地方。在调用动作时，仪表板是而不是重新创建/重新呈现。

我完全是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是

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