Question

在调用api之后，我从api取回数据，该数据又传递回用于更新reducer中状态的动作。 dashboardSaga.js

import { call, put, takeEvery } from 'redux-saga/effects';
import actionTypes from '../constants/ActionTypes';
import { getData } from '../services/DashboardService';
import {
  getDataForDashboardSuccess,
  getDataForDashboardError
} from '../actions/DashboardActions';

export function* GetDataForDashboard( action ) {
  try {
    const response = yield call( getData, action );
    yield put( getDataForDashboardSuccess( response ) );
  } catch ( error ) {
    yield put( getDataForDashboardError( error ) );
  }
}

export function* watchGetDataForDashboard() {
  yield takeEvery( actionTypes.GET_DATA_FOR_DASHBOARD, GetDataForDashboard );
}

Reducer成功方法： dashboardReducer.js

const initialState = {
  error: false,
  dashboard: {
    orderdashboardmodel: {
      rfs: '0',
      pending: '0',
      total: '0'
    },
    sitesdashboardmodel: {
      up: '0',
      down: '0',
      total: '0',
      notmonitored: '0'
    },
    support: {
      open: '0',
      late: '0',
      escalated: '0'
    }
  }
};
function getDashboardSuccess( state, action ) {
  return {
    ...state,
    dashboard: {
      orderdashboardmodel: {
        rfs: action.payload.order.rfs,
        pending: action.payload.order.pending,
        total: action.payload.order.total
      },
      sitesdashboardmodel: {
        up: action.payload.sites.up,
        down: action.payload.sites.down,
        total: action.payload.sites.total,
        notmonitored: action.payload.sites.notmonitored
      },
      support: {
        open: action.payload.support.open,
        late: action.payload.support.late,
        escalated: action.payload.support.escalated
      }
    }
  };
}

在我开始通话的组件上

static propTypes = {
    data: PropTypes.func,
    getDataForDashboard: PropTypes.func
  };

  componentDidMount() {
    this.props.getDataForDashboard( 'hello' );
  }

  render() {
    const {
      data
         } = this.props;
    return (
<div>
{data.orderdashBoardmodel.rfs}
</div>
)};

const mapStateToProps = state => ( { data: state.dashboardReducer } );

const mapDispatchToProps = dispatch =>
  bindActionCreators( { getDataForDashboard }, dispatch );

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

给出错误无法读取未定义的属性“ rfs” 。

我该如何访问启动调用的组件中的reducer中设置的值。

Answer 1

要确保使用rfs：

{data && data.orderdashBoardmodel && data.orderdashBoardmodel.rfs}

此外，映射状态应为：

const mapStateToProps = state => ( { data: state.dashboardReducer.dashboard } );

Answer 2

在切换块后的减速器中写入返回状态：

const reducer = (state, action) => {
    switch(action.type) {
        case 'ANY':
            console.log(action.payload)
    }
    return state
}

为什么我无法读取redux

2 个答案: