Как я могу сохранить запись пользователя внутри состояния в Redux?

Question

Мне нужно запустить действие для обновления storyTextValue внутри StoryTextReducer, чтобы я мог использовать его как this.props.storyTextValue в SearchArticle.

Другими словами, в CreateArticle при вводе пользователемв <textarea> с последующим нажатием Submit, я хочу, чтобы все, что они ввели, было сохранено в storyTextValue, что позволило бы использовать this.props.storyTextValue в SearchArticle для отображения текста.

Что я делаю не так и как мне этого добиться?

Вот CreateArticle:

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);
    }

    handleSubmit = event => {
        event.preventDefault();
        this.setState({storyTextValue: event.target.storyTextValue});
        this.props.storyTextValueRedux(event.target.storyTextValue);
    }

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

    onSubmit = () => {
        if(this.props.storyTextValue === "") {
            alert("Please enter the value and then click submit");
        } else {
            alert("Article saved " + '\n' + this.props.storyTextValue);
        }
    }

    render() {

        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input onChange={this.handleChange} value={this.props.cityCodeValue} type="text" placeholder="city code"/>
                    <input type="text" placeholder="author name"/>
                    <textarea value={this.props.storyTextValue} onChange={this.handleStoryText} rows="2" cols="25" />
                    <button type="submit" value="Submit" onClick={() => this.onSubmit()}>Submit</button>
                </form>
            </div>
        );
    }
}

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

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

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

Вот SearchArticle:

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

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

        this.state = {
            flag: false
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
        this.props.CityCodeReducerRedux(event.target.value);
    }

    handleSubmit(event) {
        this.setState({flag: true});
        event.preventDefault();
    }

    displayName = () => {
        if(this.props.cityCodeValue === "nyc" || this.props.articleIdValue === 1) {
            return(
                <div>
                    <p>author name: {this.props.authorNameValue}</p>
                    <p>article text: {this.props.storyTextValue}</p> {/* want to display story text here */}
                </div>
            );
        }
    }

    render() {
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input onChange={this.handleChange} value={this.props.cityCodeValue} type="text" placeholder="city code"/>
                    <input onChange={this.handleChange} value={this.props.articleIdValue} placeholder="article id"/>
                    <button onClick={() => this.displayName}  value="Search">Submit</button>
                    {this.state.flag ? this.displayName() : null}
                </form>
            </div>
        );
    }
}

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

const mapDispatchToProps = dispatch => {
    return {
        CityCodeReducerRedux: (value) => dispatch({type: actionType.CITY_CODE_VALUE, value}),
        articleIdValueRedux: (value) => dispatch({type: actionType.ARTICLE_ID_VALUE, value})
    };
};

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

Вот StoryTextReducer:

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

const initialState = {
    storyTextValue: ''
};

const StoryTextReducer = (state = initialState, action) => {
    switch (action.type) {
        case actionType.STORY_VALUE:
            return {
                ...state,
                storyTextValue: action.value
            };
        default:
            return state;
    }
};

export default StoryTextReducer;

Answer 1

В handleSubmit из CreateArticle пожалуйста console.log(event.target.storyTextValue) .... я бы подумал, что оно не определено.Я думаю, вы бы предпочли this.props.storyTextValueRedux(event.target.value);