javascript - 无法将数据从操作传递到 reducer

Question

从服务器获取响应并尝试调度

我的行动:

import axios from 'axios'
import { INCOME_LIST } from '../actionTypes'

    function receiveData(json) {
        return{

            type: INCOME_LIST,
            data: json
        }
    };


    export function IncomeList () {

        return dispatch => {

            return (
                console.log(response.data);
                axios.post('http://api.hylaa.net:8084/course/income/outline',{}, {
          headers: { 'X-Authenticated-Userid': '15000500000@1' }
         }).then(function (response) {

                    dispatch(receiveData(response.data.body));

                })

                )
        }
    }

我的 reducer :

import { INCOME_LIST } from '../actionTypes'

import Immutable from 'immutable'

const initialUserState = {
  list: [
            {
                "last_month": 501,
                "current_month": 1021,
                "total": 1521
             }

         ]
}

    const listReducer = function(state = initialUserState, action) {
       console.log('actiondata in reducer:' + action.data);

      switch(action.type) {

      case 'INCOME_LIST': 
             return Object.assign({}, state, { list: action.data });

      default: 

      return state;
      }


}

export default listReducer

console.log('reducer 中的actiondata:' + action.data); - 何时未定义。

尝试在 Action 中使用 console.log 进行记录，console.log 不起作用。如何将数据从Action传递到reducer？我认为我需要在组件中初始化 Action 吗？

尝试在组件中执行此操作

import { IncomeList } from '../../actions/income'
    componentDidMount() {

      this.props.IncomeList()

        } - says ImcomeList is not a func

Answer 1

您需要从组件调用您的操作。为此，您需要首先将其绑定(bind)到 props。为此，请使用 mapDispachToProps 组件

import {IncomeList} form './path/to/MyAction';
import { bindActionCreators } from 'redux';

class App extends React.Component {
    constructor(props) {
       super(props);
    }
    componentDidMount() {
      this.props.IncomeList
    }
    render() {
         ......
    }
}

function mapDispatchToProps(dispatch) {
    return {
       IncomeList: bindActionCreators({IncomeList}, dispatch);
    }
}