redux 工具包状态重置答案

【问题标题】：redux toolkit state resetsredux 工具包状态重置
【发布时间】：2021-07-04 10:25:15
【问题描述】：

我在 react redux 工具包中设置了一个状态。我的目标是通过从表单中捕获一些信息来设置状态。

商店

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

表格

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;

每次我点击按钮时，数据都会被捕获，发送到 redux，状态会设置一秒钟，然后状态会重置为初始状态。我正在努力找出是什么使该工具可以重置所有内容。任何线索都会帮助我。

PS：我是 javascript 新手并做出反应

【问题讨论】：

标签： javascript reactjs redux-toolkit

【解决方案1】：

这个函数是罪魁祸首。当您发送表单时，它会被调用。您没有阻止默认事件，因此页面会重新加载，并且您会丢失 Redux 存储。

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

这是更正的版本：

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

【讨论】：