Блог

привет, запрос не вводится внутри функции… кто-нибудь мог бы помочь мне лучше понять redux thunk, компонент идеален, но во время выполнения действия вызов моей спины не доходит до меня

компонент

 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;
 

Действия

 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));
    });
  };
};
 

редукторы

 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;
 

Магазин

 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;
 

действие ничего мне не возвращает, пожалуйста, помогите, я не понимаю, почему