React将状态键变为承诺

Question

我有一个使用redux体系结构的相对简单的React应用程序，出于某种原因，其中一个状态属性正在更改为承诺。

我最终会尝试从数据库中提取数据以用作数据，但我以硬编码数据开始。我不明白为什么在这个世界上，到达布局/图表/索引组件时为什么它已经变成了一个Promise？根据我的分析，我没有在应用程序中包含任何api/async功能。我已经包含了所有我认为与问题相关的文件。我已经尝试过在各个地方使用console.logging这个州，我似乎无法确定州政府何时或为什么决定改变承诺。任何帮助将非常感激。

GitHub项目回购here。

app.js

import 'babel-polyfill'; 
import React from 'react'; 
import { render } from 'react-dom'; 
import { browserHistory } from 'react-router'; 
import { syncHistoryWithStore } from 'react-router-redux'; 
import { AppContainer } from 'react-hot-loader'; 
import configureStore from './store/configureStore'; 
import Root from './containers/Root'; 

const initialState = { 
    Charts: { 
     PieChart: { 
      data: { 
       failed: false, 
       isfetching: false, 
       contains: null 
      }, 
      msg: 'Preparing to fetch', 
      width: '100%', 
      height: '30vh', 
      options: { 
       title: 'Lateness of things', 
       backgroundColor: '#fff', 
       titlePosition: 'none', 
       pieHole: 0.7, 
       pieSliceTextStyle: { 
        color: 'black', 
       }, 
      } 
     }, 
     BarChart: { 
      chartType: 'BarChart', 
      width: '100%', 
      height: '30vh', 
      data: [ 
       ['Type', 'On time', 'Late', { role: 'annotation' }], 
       ['Child', 4, 18, ''], 
       ['Fire/EV/Body', 18, 21, ''], 
       ['Truck', 49, 92, ''], 
       ['Off-Highway/UTV', 18, 62, ''], 
       ['Bus/Coach/WTORS', 5, 8, ''], 
       ['Other', 11, 23, ''] 
      ], 
      options: { 
       isStacked: true, 
       height: 300, 
       legend: {position: 'top'}, 
       hAxis: {minValue: 0} 
      } 
     } 
    } 
}; 
const store = configureStore(initialState); 
const history = syncHistoryWithStore(browserHistory, store); 

render(
    <AppContainer> 
     <Root store={store} history={history}/> 
    </AppContainer>, 
    document.getElementById('root'), 
); 

if(process.env.NODE_ENV !== 'production' && module.hot) { 
    module.hot.accept('./containers/Root',() => { 
     const NewRoot = require('./containers/Root').default; 
     render(
      <AppContainer> 
       <NewRoot store={store} history={history}/> 
      </AppContainer>, 
      document.getElementById('root'), 
     ); 
    }); 
} 

reducer.js

import { routerReducer as routing } from 'react-router-redux'; 
import { combineReducers } from 'redux'; 
import * as types from '../actions/types'; 

const Charts = async (state = {}, action) => { 
    switch(action.type) { 
     case types.PIE_DATA_LOADING: 
      return {...state, PieChart: {isfetching: true, contains: null, failed: false}}; 
     default: 
      return state; 
    } 
}; 


const rootReducer = combineReducers({ 
    Charts, 
    routing, 
}); 

export default rootReducer; 

容器/ Charts.js

import MainChart from './../components/layout/charts'; 
import {connect} from 'react-redux'; 
import { startPieDataLoad } from './../actions'; 

const mapStateToProps = (state) => { 
    return { 
     Charts: state.Charts, 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     loadingPieChartData:() => { 
      return dispatch(startPieDataLoad()); 
     } 
    }; 
}; 


export default connect(mapStateToProps, mapDispatchToProps)(MainChart); 

组件/布局/图表/ index.js

import React from 'react'; 
import classNames from 'classnames'; 
import TotalChanges from './TotalChanges'; 
import ChangesByFunctionalGroups from './ChangesByFunctionalGroups'; 
import PropTypes from 'prop-types'; 

const MainChart = ({Charts}) => { 
    const BarChartData = Charts.BarChart; 
    const PieChartData = Charts.PieChart; 
    const PieChart = (!PieChartData.data.isfetching === false) ? (<TotalChanges chartData={PieChart} />) : (<div>{PieChartData.msg}</div>); 
    return (
     <div className={classNames('mainWindow')}> 
      <div className={classNames('row')}> 
       <div className={classNames('col-sm-4')}> 
        {PieChart} 
       </div> 
       <div className={classNames('col-sm-4')}> 
        <ChangesByFunctionalGroups chartData={BarChartData} /> 
       </div> 
       <div className={classNames('col-sm-4')}> 
       </div> 
      </div> 
     </div> 
    ); 
}; 

MainChart.propTypes = { 
    Charts: PropTypes.object, 
    loadingPieChartData: PropTypes.func 
}; 

export default MainChart; 

个

configureStore.js

import { createStore } from 'redux'; 
import rootReducer from '../reducers'; 

export default function configureStore(initialState) { 
    return createStore(
     rootReducer, 
     initialState 
    ); 
}; 

action.js

import * as types from './types'; 
import fetch from 'isomorphic-fetch'; 
export function example(filter) { 
    return { 
     type: types.FILTER, 
     filter, 
    }; 
} 

export function startPieDataLoad() { 
    return { 
     type: types.PIE_DATA_LOADING 
    }; 
}; 

export function finishPieDataLoad(data) { 
    return { 
     type: (data.err === true) ? types.PIE_DATA_LOADED_FAIL : types.PIE_DATA_LOADED_SUCCESS, 
     data: data.msg 
    }; 
}; 


export function fetchPieChartData() { 
    return (dispatch) => { 
     dispatch(startPieDataLoad); 
     return fetch('http://localhost:3001/cm/piechart').then(response => response.json()).then(json => dispatch(finishPieDataLoad(json))); 
    }; 
}; 

Answer 1

问题是我宣布行动作为异步函数，导致它返回一个承诺。我没有意识到那是为什么花了我三个小时才找到它的原因。

的问题是reducer.js

import { routerReducer as routing } from 'react-router-redux'; 
import { combineReducers } from 'redux'; 
import * as types from '../actions/types'; 

const Charts = (state = {}, action) => { 
    switch(action.type) { 
     case types.PIE_DATA_LOADING: 
      return {...state, PieChart: {isfetching: true, contains: null, failed: false}}; 
     default: 
      return state; 
    } 
}; 


const rootReducer = combineReducers({ 
    Charts, 
    routing, 
}); 

export default rootReducer; 

注缺乏异步的图表=

Answer 2

首先第一件事情。在Redux中，你永远不会改变状态。在您的减速器使用object.assign

case types.PIE_DATA_LOADING: 
     return {...state, 
      Object.assign({}, {PieChart: {isfetching: true, contains: null, failed: false}})