向 State 添加新值将覆盖 React Redux 中的先前 State

Question

My reducer adds a new workout object to an array called workouts. It works perfectly fine on the first initial change. The problem is when I try to add another workout my reducer overwrites the previous workout I just added.

I am pretty sure it has something to do with my reducer and how I'm manipulating the workouts array.

Form to add a new Workout:

import React from 'react';
import { Field, reduxForm } from 'redux-form';

let Form = props => {
    const { handleSubmit } = props;
    return (
        <form onSubmit={handleSubmit}>
            <label>Name</label>
            <Field name='name' component='input' type='text' />
            <label>Total Calories</label>
            <Field name='calories' component='input' type='number' />
            <label>Duration</label>
            <Field name='duration' component='input' type='number' />
            <button type='submit'>Submit</button>
        </form>
    );
};

export default reduxForm({ form: 'workout' })(Form);

actions.js (my action):

export const addWorkout = workout => ({
    type: 'ADD_WORKOUT',
    payload: {
        workout,
    },
});

workouts.js (reducer):

const initialState = {
    workouts: [
        {
            name: 'HIIT',
            calories: '320',
            duration: '30',
        },
        {
            name: 'Run',
            calories: '35',
            duration: '400',
        },
    ],
    totalCal: 0,
};

export default function workoutReducer(state = initialState, action) {
    switch (action.type) {
        case 'ADD_WORKOUT': {
            console.log(state.workouts);
            return {
                ...state,
                workouts: [...state.workouts, action.payload.workout],
            };
        }
        default:
            return state;
    }
}

Screenshots:

Before adding any workouts, initial state contains two workouts, HIIT and Run

After adding a workout, in this case I added a Yoga workout

Adding a second workout

As you can see my first workout I added was overwritten.

Any help would be very much appreciated, thanks in advance!

Edit

Here is my component that displays the list of workouts.

import React, { useEffect } from 'react';
import './Dashboard.scss';
import { connect } from 'react-redux';

import Chart from './Chart';
import Plan from './Plan';

const Dashboard = props => {
    return (
        <div className='dashboard-container'>
            <div className='daily'>
                <h4>Keep it going Steven you got this!</h4>
                <div className='stats'>
                    <p className='calories'>Calories</p>
                    <p className='stand'>Stand Hours </p>
                    <p className='exercise'>Exercise Minutes</p>
                </div>
                <p>Workouts</p>
                {props.workouts.map((workout, i) => {
                    return (
                        <div>
                            <p key={i}>{workout.name}</p>
                        </div>
                    );
                })}
            </div>
            <div className='workouts'>
                <Chart />
                <Plan />
            </div>
        </div>
    );
};

const mapStateToProps = state => ({
    workouts: state.workouts.workouts,
    totalCals: state.workouts.totalCal,
});

export default connect(mapStateToProps)(Dashboard);

Answer 1

The problem was regarding my Add Workout link in the Navbar. Instead of using Link from react-router-dom I was just using a Nav.Link tag from bootstrap which reset my state every time I navigated to the form.

import { Link } from 'react-router-dom';
...
<Nav className='mr-auto'>
    ...
    {/* <Nav.Link href='/addworkout'>Add Workout</Nav.Link>  */}
    <Link to='/addworkout'>Add Workout</Link>
</Nav>