Javascript 从外部API更新Redux存储_Javascript_Html_Reactjs_React Redux

Javascript 从外部API更新Redux存储

javascript html reactjs

Javascript 从外部API更新Redux存储,javascript,html,reactjs,react-redux,Javascript,Html,Reactjs,React Redux,我目前正在React中构建一个应用程序，使用Redux作为数据管理系统。我遇到了一个问题，需要在从web套接字发送事件时更新应用程序（web页面）中的组件。流程如下： API Server push change -> Redux action is called -> Component that is effected by this update, is rebuild/re rendered. 但我迷失了流程的中间和最后部分。调用操作时，仪表板不会重新创建/重新呈现我是

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

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

但我迷失了流程的中间和最后部分。调用操作时，仪表板不会重新创建/重新呈现

我是一个全新的反应和重复

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);

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;
}

  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
       }
     });
   });
 }
}

    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;
  }
}

DashboardReducer.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);

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;
}

  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
       }
     });
   });
 }
}

    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;
  }
}

DashboardActions.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);

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;
}

  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
       }
     });
   });
 }
}

    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;
  }
}

仪表板组件

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>
    );
  }
}

您的操作类型为“更新系统”，但在减速器中有“更新系统”。此外，您不需要花括号

更新减速器，以使

壳体

正常工作

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

在操作

更新系统中，您将完全替换仪表板数据。您打算合并数据吗？从长远来看，我希望：查找在当前状态下已更改的数据，在本例中为“系统”，然后使用从服务器推送的数据更新该“系统”。您是否看到数据通过“console.log”（“update…”，data）；”输入？我建议使用MapStateTops/mapDispatchToProps。这个链接可能会有帮助：是的，数据就在那里。我已经更改了代码，以反映下面答案中截取的代码，但现在触发“更新系统”操作时页面保持空白。谢谢，我将相应地更新函数。我已经关注这一点一天了，没有注意到拼写错误。@Lasse一个原因让const ACTION\u NAME='updateing\u SYSTEM'，例如：）刚刚检查过。它会触发重新呈现，但在该操作后页面将保持空白。就我所知，您需要使用mapDispatchToProps
触发您的操作并更新状态-此示例非常简单-