CODEWITHSUNDEEP
reactjsreduxaxios
M.Amer
M.Amer

Reputation: 708

action does not call reducer

I am using react-redux, the problem is that one of my actions does not dispatch to reducer here is my code:

Actions.js:

export const getRooms = () => {
  console.log('reach action')
  const config = {
    headers: {
      Authorization: localStorage.getItem('lets_chat_token')
    }
  }
  return dispatch => {
    console.log('in dispatch')
    return axios
      .get(`/api/rooms`, config)
      .then(data =>
        dispatch({
          type: 'GET_ROOMS',
          payload: data.data.data
        })
      )
      .catch(err =>
        dispatch({
          type: 'ERROR',
          payload: err
        })
      )
  }
}

I am calling this action in a react component:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getRooms } from '../../Redux/Actions'

import './Connections-list.css'

class ConnectionsList extends Component {
  handleRooms = () => {
    getRooms()
  }

  render() {
    return (
      <div className="connections-list-container">
        <div className="connections-list-header">
          <i className="fas fa-users" onClick={this.handleRooms}></i>
          <i className="fas fa-user-friends"> </i>
        </div>
        <div className="connections-list-list">aasa</div>
      </div>
    )
  }
}

export default connect(
  null,
  { getRooms }
)(ConnectionsList)

The problem is that the first log appears in the getRooms() function:

console.log('reach action')

But nothing happens after that.

Note: I am using redux-thunk. And I have other actions that works perfectly.

Upvotes: 0

Views: 197

Answers (1)

uday
uday

Reputation: 1481

You need to bind you're redux action and then get it in props. Below is modified code. 

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux' // bind redux action with dispatch
import { getRooms } from '../../Redux/Actions'

import './Connections-list.css'

class ConnectionsList extends Component {
  handleRooms = () => {
    const { getRooms } = this.props //get the redux action from props
    getRooms()
  }

  render() {
    return (
      <div className="connections-list-container">
        <div className="connections-list-header">
          <i className="fas fa-users" onClick={this.handleRooms}></i>
          <i className="fas fa-user-friends"> </i>
        </div>
        <div className="connections-list-list">aasa</div>
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => {
  return bindActionCreators({getRooms}, dispatch)
}

export default connect(
  null,
  mapDispatchToProps
)(ConnectionsList)

Upvotes: 2

Related Questions