Почему поведение моих состояний Redux очень странное на основании выводов в консоли?

Question

Почему мой излишек ведет себя так, как будто он основан на выводе консоли?

Цель моего кода состоит в том, чтобы пользователь ввел текст в 3 поля, которые затем сохраняются в состояниях Redux в mapStateToProps.

В соответствии с выходными данными значения действий смешиваютсяи соответствовал и изменился, как вы выходите.

Почему это происходит?Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Вот мой код:

import React, { Component } from 'react';
import {connect} from "react-redux";
import * as actionType from "../../store/actions/actions";

class CreateArticle extends Component {
    constructor(props) {
        super(props);

        this.state = {
            value: '',
            idValue: '',
            authorValue: '',
            cityValue: ''
        }
    }

    handleSubmit = event => {
        event.preventDefault();
        this.props.cityCodeReducerRedux(this.state.cityValue);
        this.props.storyTextValueRedux(this.state.value);
        this.props.articleIdValueRedux(this.state.idValue);
        this.props.authorNameValueRedux(this.state.authorValue);

        if(this.state.value === "") {
            alert("Please enter the value and then click submit" );
        } else {
            alert("Article saved " + "\n" + this.state.value + "\n" + "Id value " + this.state.idValue);
        }
    }

    handleStoryText = event => {
        event.preventDefault();
        this.setState({value: event.target.value});
    }

    handleAuthor = event => {
        event.preventDefault();
        this.setState({authorValue: event.target.value});
    }

    handleCityValue = event => {
        event.preventDefault();
        this.setState({cityValue: event.target.value});
    }

    render() {
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input value={this.state.cityValue} onChange={this.handleCityValue} placeholder="city code"/>
                    <input value={this.state.authorValue} onChange={this.handleAuthor} placeholder="author name" />
                        <textarea value={this.state.storyTextValue} onChange={this.handleStoryText} rows="2" cols="25" />
                    <button type="submit" value="Submit">Submit</button>
                </form>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        articleIdValue: state.articleIdValue.articleIdValue,
        storyTextValue: state.storyTextValue.storyTextValue,
        authorNameValue: state.authorNameValue.authorNameValue,
        cityCodeValue: state.cityCodeValue.cityCodeValue
    };
};

const mapDispatchToProps = dispatch => {
    return {
        articleIdValueRedux: (value) => dispatch({type: actionType.ARTICLE_ID_VALUE, value}),
        storyTextValueRedux: (value) => dispatch({type: actionType.STORY_VALUE, value}),
        authorNameValueRedux: (value) => dispatch({type: actionType.AUTHOR_NAME, value}),
        cityCodeReducerRedux: (value) => dispatch({type: actionType.CITY_CODE_VALUE, value})
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(CreateArticle);

Вот AuthorNameReducer:

import * as actionType from './actions/actions';

const initialState = {
    authorNameValue: ''
};

const AuthorNameReducer = (state = initialState, action) => {
    console.log("AuthorNameReducer => " + action.value);
    switch (action.type) {
        case actionType.AUTHOR_NAME:
            return {
                ...state,
                authorNameValue: action.value
            };
        default:
            return state;
    }
};

export default AuthorNameReducer;

Вот вывод в консоли:

CityCodeReducer.js:8 CityCodeReducer => undefined
CityCodeReducer.js:8 CityCodeReducer => undefined
ArticleIdReducer.js:8 ArticleIdReducer => undefined
ArticleIdReducer.js:8 ArticleIdReducer => undefined
AuthorNameReducer.js:8 AuthorNameReducer => undefined
AuthorNameReducer.js:8 AuthorNameReducer => undefined
StoryTextReducer.js:8 StoryTextReducer => undefined
StoryTextReducer.js:8 StoryTextReducer => undefined

CityCodeReducer.js:8 CityCodeReducer => undefined
ArticleIdReducer.js:8 ArticleIdReducer => undefined
AuthorNameReducer.js:8 AuthorNameReducer => undefined
StoryTextReducer.js:8 StoryTextReducer => undefined

CityCodeReducer.js:8 CityCodeReducer => cc
ArticleIdReducer.js:8 ArticleIdReducer => cc
AuthorNameReducer.js:8 AuthorNameReducer => cc
StoryTextReducer.js:8 StoryTextReducer => cc

CityCodeReducer.js:8 CityCodeReducer => someStory
ArticleIdReducer.js:8 ArticleIdReducer => someStory
AuthorNameReducer.js:8 AuthorNameReducer => someStory
StoryTextReducer.js:8 StoryTextReducer => someStory

CityCodeReducer.js:8 CityCodeReducer => 
ArticleIdReducer.js:8 ArticleIdReducer => 
AuthorNameReducer.js:8 AuthorNameReducer => 
StoryTextReducer.js:8 StoryTextReducer => 

CityCodeReducer.js:8 CityCodeReducer => someName
ArticleIdReducer.js:8 ArticleIdReducer => someName
AuthorNameReducer.js:8 AuthorNameReducer => someName
StoryTextReducer.js:8 StoryTextReducer => someName