react/ redux app : actions not dispatching to store

Question

I am creating a react app with redux for state management, I am facing issues when trying to dispatch and action, action is showing in redux devtools but it's not storing data to redux store not sure why it's happening, very unusual

If anyone knows why this happens please do let me know

My component is below

import axios from "axios";
import React, { Component } from "react";
import { connect } from "react-redux";
import { SETDATA } from "./store";

class Hello extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    this.firstdispatch();
  }

  firstdispatch = () => {
    axios.get("https://jsonplaceholder.typicode.com/users").then((r) => {
      console.log("data fetched", r.data);
      this.props.setdata(r.data);
    });
  };

  render() {
    return (
      <div>
        {" "}
        fff
        {/* <button onClick={this.props.setdata}>getdata</button>
        <button onClick={this.props.removedata}>decriment</button> */}
        {/* <button onClick={props.push}>push</button>
      <button onClick={props.pop}>pop</button> */}
        {console.log(this.props)}
        {this.props.users &&
          this.props.users.map((m, i) => (
            <div key={i}>
              {m.title} {` - - - -`} {m.email}
            </div>
          ))}
      </div>
    );
  }
}

const mapstatetoprops = (state) => {
  return {
    users: state.users.users || [],
  };
};
const mapDispatchTopProps = (dispatch) => {
  return {
    setdata: (users) => {
      dispatch({ type: SETDATA, users });
    },
  };
};

export default connect(mapstatetoprops, mapDispatchTopProps)(Hello);

---

Actions reducers and store is below updated

---

import * as redux from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";

export const SETDATA = "users";
export const DELETEDATA = "data/deletedata";

const initSst = {
  users: [],
};

const users = (state = initSst, action) => {
  switch (action.type) {
    case SETDATA:
      return { ...state, ...action.data };
    case DELETEDATA:
      return { data: null };
    default:
      return state;
  }
};
const rootReducer = redux.combineReducers({
  users,
});

const store = redux.createStore(
  rootReducer,
  composeWithDevTools(
    redux.applyMiddleware(thunk)
    // other store enhancers if any
  )
);

export default store;

Answer 1

once I updated the initial state to empty array its working

redux, actions, store

import * as redux from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";

export const SETDATA = "users";
export const DELETEDATA = "data/deletedata";

const users = (state = [], action) => {
  switch (action.type) {
    case SETDATA:
      return [...action.payload];
    default:
      return state;
  }
};
const rootReducer = redux.combineReducers({
  users: users,
});

const store = redux.createStore(
  rootReducer,
  composeWithDevTools(
    redux.applyMiddleware(thunk)
    // other store enhancers if any
  )
);

export default store;

component

import axios from "axios";
import React, { Component } from "react";
import { connect } from "react-redux";
import { SETDATA } from "./store";

class Hello extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    this.firstdispatch();
  }

  firstdispatch = async () => {
    await axios.get("https://jsonplaceholder.typicode.com/users").then((r) => {
      // console.log("data fetched", r.data);
      this.props.setdata(r.data);
    });
  };

  render() {
    return (
      <div>
        fff {console.log(this.props.users, "fff")}
        {(this.props.users || []).map((m, i) => (
          <div key={i}>
            {m.title} {m.email}
          </div>
        ))}
      </div>
    );
  }
}

const mapstatetoprops = (state) => {
  return {
    users: state.users,
  };
};
const mapDispatchTopProps = (dispatch) => {
  return {
    setdata: (users) => {
      dispatch({ type: SETDATA, payload: users });
    },
  };
};

export default connect(mapstatetoprops, mapDispatchTopProps)(Hello);

Answer 2

Just update "SETDATA" to SETDATA in the switch/case

case SETDATA:
  return { ...state, ...action.data };