javascript - action post redux thunk

Question

hi the request is not entering inside the function ... someone could help me to better understand redux thunk, The component is perfect, but at the time of executing the action, the call to my back is not reaching me

component

import React, {useState} from "react";
import { createCategory} from '../../actions/crudCategoriesActions';



function FormCategory() {
//----------------------Categoria----------------------------------//
    const initialFormState = { name: "", description: "" };
    const [category, setCategory] = useState(initialFormState);
    
 //-------------------------AgregarCategoria-------------------//   
  const addCategory = (category) => {
    const newCategory = {
      name: category.name,
      description: category.description, //creo la categorias que voy a enviar con los datos de category
    };
    console.log(createCategory(newCategory));
  };


  const onSubmitAdd = (e) => {
    e.preventDefault();
     addCategory(category);
    setCategory(initialFormState);

    }
  ;
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setCategory({ ...category, [name]: value });
  };


return (
    <div>
      <div className="md:grid md:grid-cols-3 md:gap-6 ">
        <div className="mt-5 md:mt-0 md:col-span-2">
          <form action="#" method="POST">
            <div className="shadow sm:rounded-md sm:overflow-hidden">
              <div className="px-4 py-5 bg-white space-y-6 sm:p-6">
                <div className="grid grid-cols-3 gap-6">
                  <div className="col-span-3 sm:col-span-2">
                    <label className="block text-sm font-medium text-gray-700">
                      Category to Add:
                    </label>
                    <div className="mt-1 flex rounded-md shadow-sm">
                      <input
                        type="text"
                        name="name"
                        id="company_website"
                        className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300"
                        placeholder="Give me a name"
                        value={category.name}
                        onChange={handleInputChange}
                      />
                    </div>
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Description:
                  </label>
                  <div className="mt-1">
                    <textarea
                      id="about"
                      name="description"
                      rows="3"
                      className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
                      placeholder="
                      put a description of how beautiful I am "
                      value={category.description}
                      onChange={handleInputChange}
                    ></textarea>
                  </div>
                </div>
                <div> Select one category in case to delete or modify:</div>
                <br />
                <br />
                <br />
                <br />
              </div>
              <hr></hr>
              <div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
                <button
                  onClick={onSubmitAdd}
                  type="submit"
                  className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  Save
                </button>
                <button
               
                  type="submit"
                  className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  Modify
                </button>
                <button
              
                  type="submit"
                  className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  Delete
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default FormCategory;

actions

import axios from "axios";

import { ADD_CATEGORY } from "../constants/categoriesConstants.js";

const _addCategory = (category) => ({
  type: ADD_CATEGORY,
  payload: category,
});

export const createCategory = (category) => {
  return (dispatch) => {
    axios.post("http://localhost:3001/categories",  category).then((result) => {
      dispatch(_addCategory(result.data));
    });
  };
};

reducers

import {  ADD_CATEGORY  } from "../constants/categoriesConstants.js";


const initialState = {
    allCategories: [],
    newCategory: {},
  };
  
  const categoryReducer = (state = initialState, action) => {
    switch (action.type) {
      case ADD_CATEGORY:
        return {
          ...state,
          allCategories: [...state.allCategories, action.payload]
        };
      
      default:
        return state;
    }
  };

  export default categoryReducer;

store

import { createStore, combineReducers, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { productListReducer } from '../reducers/productReducers';
import categoriesReducer from '../reducers/CategoriesReducers';

const reducer = combineReducers({
  productList: productListReducer,
  categories: categoriesReducer,
});

//Loading Section
const initialState = {};

const middleware = [reduxThunk];

const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

the action is not giving me anything back, please help i dont understand whyy

question from:https://stackoverflow.com/questions/65948979/action-post-redux-thunk

Answer 1

Waitting for answers