I am doing a simple project which contains a local server 5000 ,where I post a new user with name / age, and redux-toolkit where I created userSlice, store, and a small form. when I am trying to post a new user and get response the error is >>>>
(0 , _redux_userSlice__WEBPACK_IMPORTED_MODULE_0__.startUser) is not a function
TypeError: (0 , _redux_userSlice__WEBPACK_IMPORTED_MODULE_0__.startUser) is not a function
at postUser (http://localhost:3000/static/js/bundle.js:102:71)
at handleSubmit (http://localhost:3000/static/js/bundle.js:193:58)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:13786:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:13830:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:13887:35)
at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:13901:29)
at executeDispatch (http://localhost:3000/static/js/bundle.js:18045:7)
at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:18071:11)
at processDispatchQueue (http://localhost:3000/static/js/bundle.js:18082:9)
at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:18091:7)
here are my files :
1- api.js
import axios from "axios";
import { startUser, successUser, errorUser } from "../redux/userSlice";
export const postUser = async (user, dispatch) => {
dispatch(startUser());
try{
const response = await axios.post("http//localhost:5000/api/users", user);
dispatch(successUser(response.data));
}catch(error){
dispatch(errorUser());
}
}
2- userSlice.js
import { createSlice } from "@reduxjs/toolkit";
export const userSlice = createSlice({
name: "user",
initialState : {
userData: {
name: "",
age: "",
},
loading: null,
error: null,
},
reducer: {
addUser: (state, action) => {
state.userData.name = action.payload.name;
},
addAge: (state, action) => {
state.userData.age = action.payload.age;
},
startUser: (state) => {
state.loading = true;
},
successUser: (state, action) => {
state.userData = action.payload;
state.loading = false;
},
errorUser: (state) => {
state.loading = false;
state.error = false;
},
},
});
export const { addUser, addAge, startUser, successUser, errorUser } =
userSlice.actions;
export default userSlice.reducer;
3.Form.js
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
// import {
// addUser,
// addAge,
// startUser,
// successUser,
// errorUser,
// } from "../redux/userSlice";
import { postUser } from "../api/api.js";
const Form = () => {
const [name, setName] = useState("");
const [age, setAge] = useState("");
const dispatch = useDispatch();
const { userData, error, loading } = useSelector((state) => state.user);
console.log(userData, error, loading);
const handleSubmit = (e) => {
e.preventDefault();
// this method will update userSlice without api:
// dispatch(addUser({name, age}));
// this method will update api and api will update userSlice:
// console.log(`${name} & ${age}`);
postUser({ userData, error, loading }, dispatch);
// dispatch(addUser({name, age}));
};
return (
<div>
<form onSubmit={handleSubmit}>
<div>
<input type="text" onChange={(e) => setName(e.target.value)} value={name} placeholder="enter name"/>
</div>
<div>
<input type="number" onChange={(e) => setAge(e.target.value)} value={age} placeholder="enter age" />
</div>
{loading ? (
"Loading ..........."
) : (
<div>
<button> Add User </button>
</div>
)}
{error && loading === "false" && <span> Something Went Wrong !!!</span>}
</form>
</div>
);
};
export default Form;
- Header.js
import React from "react";
import { useSelector } from "react-redux";
const Header = () => {
const { userData } = useSelector((state) => (state.user));
// console.log(userData);
// you can destructure the userData like this :
// const {name} = useSelector((state) => state.user.userData);
return (
<div>
<p> Hello {userData.name} </p>
<p> Your age is {userData.age} </p>
</div>
);
};
export default Header;
- store.js
import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./userSlice";
const store = configureStore({
reducer: {
user: userSlice,
},
});
export default store;
and finally my server as server.js :
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.json());
app.post("api/users", (request,response) => {
setTimeout(function() {
response.send(request.body)
}, 2000)
});
app.listen("5000", () => {
console.log("server is running on port 5000");
});
Thanks in advance.
but I’ve got another error 
