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

时间:2017-01-23 07:41:44

标签: javascript reactjs redux

从服务器获取响应并尝试发送

我的行动:

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

                })

                )
        }
    }

我的减速机:

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('actiondata in reducer:' + action.data); - 什么时候这样做了。

在Action中尝试console.log,console.log不起作用。如何将数据从Action传递给reducer?我想我需要在我的组件中初始化Action?

尝试在Component

中执行此操作
import { IncomeList } from '../../actions/income'
    componentDidMount() {

      this.props.IncomeList()

        } - says ImcomeList is not a func

1 个答案:

答案 0 :(得分:1)

您需要从组件中调用action。为此,您需要先将它绑定到道具。为此,请使用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);
    }
}