CODEWITHSUNDEEP
javascriptreactjsreduxredux-thunkredux-toolkit
Umut Palabiyik
Umut Palabiyik

Reputation: 323

I cant get values from createAsyncThunk function

UpdatedMemory.jsx

    import React, { useState, useEffect } from "react";
    import { Form, Button } from "react-bootstrap";
    import ReactFileBas64 from "react-file-base64";
    import { useHistory } from "react-router-dom";
    import { fetchSingleMemory } from "../axios";
    import { useDispatch } from "react-redux";
    import { updateMemory } from "../features/memoriesSlice";
    
    const UpdateMemory = ({ id }) => {
      const history = useHistory();
      const dispatch = useDispatch();
    
      const [memoryData, SetMemoryData] = useState({
        title: "",
        content: "",
        creator: "",
        image: "",
      });
    
      console.log(memoryData);
      useEffect(() => {
        const getMemory = async (id) => {
          const res = await fetchSingleMemory(id);
          const { title, content, creator, image } = res.data;
          SetMemoryData({
            title,
            content,
            creator,
            image,
          });
        };
        getMemory(id);
      }, [id]);
    
    return(
 <Form
        onSubmit={(e) => {
          e.preventDefault();
          dispatch(updateMemory(id, memoryData));
          history.push("/");
        }}
      >
        <Form.Group>
          <h1>Create a memory</h1>
        </Form.Group>
...
)
export default UpdateMemory;

memoriesSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { fetchMemories, API } from "../axios";

export const getMemories = createAsyncThunk("memories/get", async () => {
  const { data } = await fetchMemories();
  return data;
});

export const addMemory = createAsyncThunk(
  "memories/post",
  async (newMemory) => {
    const { data } = await API.post("/memories", newMemory);
    return data;
  }
);

export const deleteMemory = createAsyncThunk("memories/delete", async (id) => {
  const { data } = await API.delete(`/memories/${id}`);
  return data;
});

export const updateMemory = createAsyncThunk("memories/update", async (id, content) => {
        console.log("id : ", id)
        console.log("content : ", content)
        const { data } = await API.put(`/memories/${id}`, content)
        return data

    
    
})

axios.js

import axios from "axios";

export const API = axios.create({
  baseURL: "http://localhost:5000",
});

// Create a memory
export const createMemory = async (newMemory) => {
  await API.post("/memories", newMemory);
};

// Get all memories
export const fetchMemories = () => API.get("/memories");

// Get selected memory
export const fetchSingleMemory = async (id) => await API.get(`/memories/${id}`)


// Delete selected memory
export const deleteMemory =  (id) =>  API.delete(`/memories/${id}`);


// Update selected memory
export const updateMemory = (id, content) => API.put(`/memories/${id}`, content)

Hi all. Firstly of all my rest of my createAsyncThunk functions((getMemories, addMemory, deleteMemory) work well. But when I try to get value of 2nd parameter from updateMemory function console.log("content : ", content) display content : {extra: undefined, requestId: "mtUwsnm7jiaTURnpKV3W_", signal: AbortSignal, dispatch: ƒ, getState: ƒ, …} so it doesnt send me memoryData.Why dispatch(updateMemory(id, memoryData)) doesnt send me 2nd parameter properly?

Upvotes: 0

Views: 735

Answers (1)

Umut Palabiyik
Umut Palabiyik

Reputation: 323

I solved it guys. When I use dispatch(updateMemory({id, memoryData})) instead of dispatch(updateMemory(id, memoryData)) it works properly.

Upvotes: 1

Related Questions