score:2

Accepted answer

there's a few knots; i made this simplified sandbox (mocking an api call) of how it should work:

https://codesandbox.io/s/wonderful-minsky-99xi4?file=/src/app.js:0-799

index

import react from "react";
import reactdom from "react-dom";
import { createstore, applymiddleware } from "redux";
import { provider } from "react-redux";
import thunkmiddleware from "redux-thunk";
import rootreducer from "./rootreducer";
import app from "./app";

const store = createstore(rootreducer, applymiddleware(thunkmiddleware));

const rootelement = document.getelementbyid("root");
reactdom.render(
  <provider store={store}>
    <app />
  </provider>,
  rootelement
);

app

import react from "react";
import "./styles.css";
import { connect } from "react-redux";
import deleterequest from "./deleterequest";

const mapstatetoprops = state => {
  return {
    comments: state.comments
  };
};

const mapdispatchtoprops = {
  deleterequest: deleterequest
};

let app = ({ comments, deleterequest }) => {
  const makedeleterequest = id => {
    deleterequest(id);
  };

  return (
    <div classname="app">
      {comments.map(comment => {
        return (
          <div key={comment.id}>
            <p>{comment.text}</p>
            <button onclick={() => makedeleterequest(comment.id)}>
              delete
            </button>
          </div>
        );
      })}
    </div>
  );
};

app = connect(
  mapstatetoprops,
  mapdispatchtoprops
)(app);

export default app;

reducer

const initialstate = {
  data: [],
  error: "",
  comments: [{ id: 1, text: "test1" }, { id: 2, text: "test2" }],
  loading: false,
  editing: false
};

function rootreducer(state = initialstate, action) {
  switch (action.type) {
    case "delete_comment":
      return {
        ...state,
        comments: state.comments.filter(comment => comment.id !== action.id)
      };
    default:
      return state;
  }
}

export default rootreducer;

async action

import deletecomment from "./deletecomment";

const mockapi = new promise(function(resolve, reject) {
  settimeout(() => resolve("deleted"), 2000);
});

const deleterequest = id => {
  return dispatch => {
    const makedeleterequest = async () => {
      await mockapi;
      dispatch(deletecomment(id));
    };

    makedeleterequest();
  };
};

export default deleterequest;

delete comment action

export default function deletecomment(id) {
  return { type: "delete_comment", id };
}

score:2

it looks like you're not actually dispatching the action, you're just returning an async action creator (deletecomment function). in order your code to work, you need to first add redux-thunk middleware to your redux store (so that you can use async action creators) and then, in your component, when you're calling deletecomponent, you have to wrap the call using redux dispatch.

if you're using a function component, you can add usedispatch hook and have something like:

import {usedispatch} from "react-redux";
// ...

function mycomponent() {
  const dispatch = usedispatch();
  // ...
  return <span classname="delete_info" onclick={() => dispatch(deletecomment(comment.id))}>delete</span>
}

or you can just use the connect function to create a hoc and pass the dispatch function from the provider's context:

const connectedcomponent = connect(undefined, dispatch => ({dispatch}))(mycomponent);

function mycomponent({dispatch}) {
  return <span classname="delete_info" onclick={() => dispatch(deletecomment(comment.id))}>delete</span>;
}

Related Query

More Query from same tag