redux toolkit state resets

Question

I am stuck setting a state in react redux tool kit. My objective is to set the state by capturing some information from a form.

Store

import { createSlice } from '@reduxjs/toolkit'

export const SourceSlice = createSlice({
  name: 'source',
  initialState: {
    name : "" ,
    description:"",
    version:"" ,
    contact :"" ,
    id:"",
  } ,

  reducers: {

    addSource: (state ,action) => {
      state.name = action.payload.name
      state.description = action.payload.description
      state.version = action.payload.version
      state.contact = action.payload.contact
      state.id =  action.payload.name + "-" + action.payload.version
      } ,
  },
})


// Action creators are generated for each case reducer function
export const { addSource ,addExtract} = SourceSlice.actions
export default SourceSlice.reducer

Form

import { useDispatch } from 'react-redux'
import {addSource  } from '../../Store/SourceSlice'
import React, {useState} from 'react'

const Source = () => {

    const dispatch = useDispatch("")

    const [name, setName] = useState('');
    const [description, setDescription] = useState('');
    const [version, setVersion] = useState('');
    const [contact, setContact] = useState('');
    
    const saveSourceDetails = () => {      
      const payload = 
        { 
            name : name,
            description : description,
            version: version ,
            contact: contact
        }      
      dispatch(addSource(payload))
    };


    const onDataChange = (event) => {
      event.preventDefault();     

      if( event.target.name === "name"){
          setName(event.target.value)
      }
      
      if( event.target.name === "description"){
          setDescription(event.target.value)
      }       
      if( event.target.name === "version"){
          setVersion(event.target.value)
      }    
      if( event.target.name === "contactPerson"){
          setContact(event.target.value)
      }  

    }

    return (
      <div>
      <form className="ui form" onSubmit={saveSourceDetails}>
        <div className="field">
          <div className="Three fields">
            <div className="field">
              <input
                type="text"
                name="name"
                value={name}
                placeholder="Source Name"
                onChange={onDataChange}
              />
            </div>
            <div className="field">
              <input
                type="text"
                name="description"
                value={description}
                placeholder="Source Description"
                onChange={onDataChange}
              />
            </div>
            <div>
              <select
                name="version"
                multiple=""
                className="ui fluid dropdown"
                onChange={onDataChange}
              >
                <option value=""></option>
                <option value="v1">v1</option>
                <option value="v2">v2</option>
                <option value="v3">v3</option>
              </select>
            </div>
            <div className="field">
              <input
                type="text"
                name="contactPerson"
                value={contact}
                placeholder="Contact Person"
                onChange={onDataChange}
              />
            </div>
            <button className="ui button" type="submit">
              +
            </button>
          </div>
        </div>
      </form>
    </div>
    );
};

export default Source;

Every time when i hit the button , the data is captured, send to redux the state is set for a second and the then state is reset to initial state. I am struggling to find out what makes the tool to reset everything. Any leads would help me.

PS: I am new to javascript and react

Answer 1

This function is the culprit. When you send the form, this gets called. You are not preventing the default event, so the page reloads, and you lose your Redux store.

const saveSourceDetails = () => {
  const payload = {
    name: name,
    description: description,
    version: version,
    contact: contact
  };
  dispatch(addSource(payload));
};

Here's the corrected version:

const saveSourceDetails = (e) => {
  e.preventDefault();
  const payload = {
    name: name,
    description: description,
    version: version,
    contact: contact
  };
  dispatch(addSource(payload));
};