CODEWITHSUNDEEP
javascriptreactjsredux
Егор Кротенко
Егор Кротенко

Reputation: 818

Can't pass data from action to reducer

Get response from server and try to dispatch

My Action:

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

                })

                )
        }
    }

My 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('actiondata in reducer:' + action.data); - When do this got undifined.

Try console.log something in Action, console.log not working. How to pass data from Action to reducer? Think I need initialize Action in my component?

Try do this in Component

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

      this.props.IncomeList()

        } - says ImcomeList is not a func

Upvotes: 1

Views: 1076

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281626

You need to call your action from the Component. For this you need to bind it to props first. For this make use of mapDispachToProps component 

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

Upvotes: 1

Related Questions