variable name undefined error in redux-store component. I have tried to store the shopname(registration information) in redux store

Question

I want to store my login credentials in redux-react. I'm attaching few lines of code (a part of the problem).

sksignup.js:

import React, { Component } from 'react';
import { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { connect, useDispatch, useSelector } from 'react-redux';
import { namesactions } from '../store/display';

function Sksignup() {
  const[shopname,setshopname]=useState('') 
  const dispatch = useDispatch()

  const showdetails =(e) =>{
        setshopname(e)
        dispatch(
            namesactions.updatename(
                {   
                    type: "namesactions",
                    payload: {shopname},
                }
            )
        )
    }
   

  const insertdata = () => { #backend code that works fine
    axios.post('http://localhost:3001/register', { shopname: shopname, })
      .then( 
        navigate('/userentry')
      ) 

  <label>enter your shop name:</label>
  <input type="text" name="shopname" onChange={(e)=>{showdetails(e.target.value)} />
  <button onClick={insertdata}>register</button>

The code related to store (created to store the docs related to redux) folder

display.js\store:

import { configureStore, createSlice } from "@reduxjs/toolkit";

const names = createSlice({
  name: 'skdetail',
  initialState: { shopname: " ", },
  reducers: {
    updatename(state,action){
                state.shopname=action.payload.shopname;
                return shopname;
            }
  }
})

export const namesactions = names.actions;
export default names; 

index.js\store:

import { configureStore, createSlice } from "@reduxjs/toolkit";
import names from "./display";

const store = configureStore({
  reducer: {
    name: names.reducer,
  },
});

export default store;

index.js\src:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import store from './store';
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import { Provider } from 'react-redux';
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store ={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

I am getting the error as

'shopname' is not defined  no-undef

under display.js\store - so the shopname which is set as initialState in display.js is not considered? how to make it a defined variable? and when i check it on redux dev tools, it shows the state as undefined :(

I tried setting a separate local state for sksignup.jsx and then updating it in the store. it didnt work for me. I am at the very beginning stage and trying hard to learn...so please help..

Answer 1

The action generated by createSlice will return a suitable object with a payload for the dispatch function. So the only thing you should provide, in this case, is an object with a shopname property. The shopname is basically missing in the root of payload in the example that you provided, which causes the not defined error. So you should change your showdetails function to:

  const showdetails =(e) =>{
        setshopname(e)
        dispatch(
            namesactions.updatename({shopname})
        )
    }

See also the example "setUserName" in the docs