action method not getting called - reactjs

Question

I am trying to get a simple react-redux app to work and I am running into a weird error that I can't figure out. I am trying to simply update my current user's status and handle the store and it doesnt work. changeUserStatus is not getting called
setCurrentUserFirstName - works setCurrentUserHandle - doesn't
export const changeUserStatus = (userid,status) => async (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase()
const databaseRef = firebase.database().ref()
const statusRef = databaseRef.child("users").child(userid).child("user_status")
statusRef.set(status).then(() => {
dispatch({ type: 'CHANGE_USER_STATUS' });
});
}
//home.js file
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { firebaseConnect } from 'react-redux-firebase'
import { compose } from 'redux'
import { Redirect } from 'react-router-dom'
import {changeUserStatus} from '../../store/actions/userActions'
class Users extends Component {
handleAcceptClickEvent1 =(e) =>{
console.log("accepted");
const { userid, status } = this.props;
changeUserStatus(e.target.name,"accepted");
}
handleRejectClickEvent1 =(e) =>{
console.log("rejected");
const { userid, status } = this.props;
changeUserStatus(e.target.name,"rejected");
}
reject =(e) =>{
console.log("rejected");
const { userid, status } = this.props;
this.props.changeUserStatus(userid=e.target.name,status="rejected");
}
UserCard = ({user}) =>{
const status = user.user_status;
let acceptComponent;
let rejectComponent;
if (status == "pending"){
acceptComponent = <td><button type="button" class="btn btn-success green" name ={user.user_id} onClick={this.handleAcceptClickEvent1}>Accept</button></td>
rejectComponent = <td><button type="button" class="btn btn-danger red" name ={user.user_id} onClick={this.handleRejectClickEvent1}>Reject</button></td>
}
else if(status == "accepted"){
acceptComponent = <td>Accepted</td>
rejectComponent = <td></td>
}
else{
acceptComponent = <td></td>
rejectComponent = <td>Rejected</td>
}
return (
<tr>
<th scope="row">{user.user_id}</th>
<td>{user.company_name}</td>
<td>{user.email}</td>
{acceptComponent}
{rejectComponent}
</tr>
)
}
render() {
const { users, auth } = this.props;
if (!auth.uid) return <Redirect to='/login' />
console.log(users);
return (
<div className="dashboard container">
<div className="row">
<div className="project-list section">
<div>
<p>Users</p>
</div>
<table className="table table-striped table-bordered" style={{ width: "100%" }}>
<thead>
<tr>
<th scope="col">User Id</th>
<th scope="col">Company Name</th>
<th scope="col">Email</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{users && users.map(user => {
return <this.UserCard user={user.value} key={user.value.id} />
})}
</tbody>
</table>
</div>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
users: state.firebase.ordered.users,
auth: state.firebase.auth
}
}
const mapDispatchToProps = (dispatch) => {
return{
changeUserStatus: (userid,status) => dispatch(changeUserStatus(userid,status))
}
}
export default compose(
connect(mapStateToProps),
firebaseConnect({ users: 'users' })
)(Users);

Answer 1

put this and check
export default compose(
connect(mapStateToProps,mapDispatchToProps),
firebaseConnect({ users: 'users' })
)(Users);