mapStateToprops вызывается дважды и возвращает пустой массив в конце

Question

Я пытаюсь сохранить данные сотрудника в хранилище, используя redux, но когда я пытался получить доступ к хранилищу, используя mapStateToProps, он возвращает пустой массив, и он вызывается дважды.В первый раз состояние имеет значение vaue, но во второй раз оно вернет пустой массив, когда я его проверил

редуктор / индекс, js :

    import { AppConstants } from '../constants/actionTypes'
       const initialState = {
          employeeDetails: []
        };
        const rootReducer = (state = initialState, action) => {
        switch (action.type) {

          case AppConstants.ADD_EMPLOYEE:
              let emplData = state.employeeDetails
              let data = [
                   ...emplData.slice(0, action.index),
                   action.payload,
                  ...emplData.slice(action.index)
                   ]
            return  {...state,
                  employeeDetails: data
                  }
          default:
                 return state
          }
       }
    export default rootReducer;

employee.js:

    import React, { Component } from 'react';
     import Input from '../components/Input'
     import Button from '../components/Button'
     import { addEmployee } from '../actions/index'
      import { connect } from "react-redux";
     class EmployeeForm extends Component {
         constructor(props) {
              super(props);
              this.state = {
               employee: [],
               empName: "",
               empId: "",
               emailId: "",
               empAge: "",

              }
            }


handleChange = (evt) => {
    this.setState({
        [evt.target.name]: evt.target.value
    });

}
handleFormSubmit = () => {
    debugger;
    let employDet = {
        empName: this.state.empName,
        empId: this.state.empId,
        emailId: this.state.emailId,
        empAge: this.state.empAge
    }
    this.props.dispatch(addEmployee(employDet))

}

handleClearForm = () => {

}
handleDelete = (e) => {

}

render() {
    debugger
    let employeeDetails= this.props.employeeDetails
    console.log("in render "+this.props.employeeDetails)
    return (
        <div>
            <form className="container-fluid" >
                <Input
                    inputType={"text"}
                    title={"Full Name"}
                    name={"empName"}
                    value={this.state.empName}
                    placeholder={"Enter your name"}
                    handleChange={this.handleChange}
                />{" "}

                <Input
                    inputType={"text"}
                    title={"Email Id"}
                    name={"emailId"}
                    value={this.state.emailId}
                    placeholder={"Enter your Email Id"}
                    handleChange={this.handleChange}
                />{" "}

                <Input
                    inputType={"text"}
                    title={"Employee Id"}
                    name={"empId"}
                    value={this.state.empId}
                    placeholder={"Enter your Employee Id"}
                    handleChange={this.handleChange}
                />{" "}
                <Input
                    inputType={"number"}
                    name={"empAge"}
                    title={"Age"}
                    value={this.state.empAge}
                    placeholder={"Enter your age"}
                    handleChange={this.handleChange}
                />{" "}


                <Button
                    action={this.handleFormSubmit}
                    type={"primary"}
                    title={"Submit"}
                    className="buttonStyle"
                />{" "}

                <Button
                    action={this.handleClearForm}
                    type={"secondary"}
                    title={"Clear"}
                    className="buttonStyle"
                />{" "}

            </form>
            <br />

            <table border="1" style={{ width: 400, paddingTop: 5 }}>
                <thead>
                    <tr>
                        <th>Employee Name</th>
                        <th>Employee Id</th>
                        <th>Email Id</th>
                        <th>Age</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    {employeeDetails.map((emp, i) => {
                        return (
                            <tr key={i}>
                                <td>{emp.empName}</td>
                                <td>{emp.empId}</td>
                                <td>{emp.emailId}</td>
                                <td>{emp.empAge}</td>
                                {/* <td>
                                    <button onClick={this.handleEdit} id={emp.id}>
                                        Edit
                </button>
                                </td> */}
                                <td>
                                    <button onClick={this.handleDelete} id={emp.emailId}>
                                        Delete
                </button>
                                </td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        </div>
    )
}
}

     const mapStateToProps = state => {

         const { employeeDetails } = state

          return {
               employeeDetails: employeeDetails
          }

         };
        export default connect(mapStateToProps)(EmployeeForm)

store.js:

 import { createStore, combineReducers, applyMiddleware } from 
 'redux';
 import rootReducer from './reducers/index';
 import thunk from 'redux-thunk';

 const store  = createStore(rootReducer,
                        applyMiddleware(thunk));

 export default store;

action/index.js:

   import {AppConstants} from '../constants/actionTypes'


   export const addEmployee = (empData) => {

         return dispatch => {
           dispatch({ type: AppConstants.ADD_EMPLOYEE, 
           payload: empData
         })
      }
   };

** ActionType.js **

   export const AppConstants = {
        ADD_EMPLOYEE : "ADD_EMPLOYEE",
    }

Answer 1

Основная проблема заключается в том, что вы используете кнопку отправки формы.Стандартное поведение кнопки отправки - отправить форму и перезагрузить браузер.Перезагрузка в одностраничном приложении перезапускает приложение с нуля, поэтому вы не можете использовать это стандартное поведение кнопки отправки.Не используйте кнопку отправки, например, измените тип кнопки на «кнопка»:

 <button type={'button'} onClick={this.handleFormSubmit}>Submit</button>

Вторая проблема может быть в вашем редукторе.Когда вы вызываете push для state.employeeDetails, вы меняете его.Попробуйте вставить / протолкнуть новый элемент с неизменяемой операцией, в документации по редуксу есть некоторая тема по проблеме:

https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#inserting-and-removing-items-in-arrays

РЕДАКТИРОВАТЬ:

В вашей реализации предложенного шаблона обновления редукса вы вставляете по определенному индексу (но ваше действие не отправляет индекс сейчас).Если вы хотите просто добавить элемент в конец (как push, но неизменяемый), вы можете использовать оператор распространения массива:

let data = [
  ...emplData,
  action.payload
]