Как сохранить введенный текст в состоянии с помощью Redux?

Question

Я хочу ввести в текстовое поле некоторую текстовую строку, например, here's some random text.Я хочу, чтобы here's some random text отображался через alert() внутри функции handleSubmit().

На данный момент, random 123, который находится внутри StoryTextReducer, действительно отображается через alert() внутри handleSubmit(), потому что он жестко запрограммирован.

Но я хочу вручную ввести текст в <textarea>, сохранить этот текст в состоянии storyTextValue (внутри StoryTextReducer), а затем отобразить его с помощью alert() в функции handleSubmit().

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

Вот StoryTextReducer:

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.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

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

    handleSubmit(event) {
        this.setState({value: event.target.value});
        this.props.storyTextValueRedux(event.target.value);
        alert("Article saved" + '\n' + this.props.storyTextValue);
        event.preventDefault();
    }

    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 rows="2" cols="25" ></textarea>
                    <input type="submit" value="Submit"/>
                </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})

    };
};

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

Вот StoryTextReducer:

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

const initialState = {
    storyTextValue: 'random 123'
};

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

export default StoryTextReducer;

Answer 1

Вы можете напрямую вызвать значение состояния, так как оно уже обновлено.И я верю, что установка состояния внутри отправки не требуется.

Вы можете передать this.state.value вместо event.target.value, чтобы сделать API вызов.

handleSubmit() {
    event.preventDefault();
    this.props.storyTextValueRedux(this.state.value);
    alert("Article saved" + '\n' + this.state.value);
}

Answer 2

Есть несколько моментов, которые вы, возможно, пропустили:

1) Вы не передаете значение в storyTextValueRedux в mapDispatchToProps.Ваш код должен выглядеть следующим образом

storyTextValueRedux: (value) => dispatch({type: actionType.STORY_VALUE, value})

2) Вы прослушиваете неправильный actionType в вашем редукторе.Я предполагаю, что вы хотите слушать это

case actionType.STORY_VALUE: 

3) Вместо того, чтобы обновлять значение в форме отправки, вы должны прикрепить текстовую область, аналогичную полю ввода.(Возможно, вы захотите изменить имя метода на другое) Redux-Forms или обобщенный компонент-обертка (например, Серия блогов Марка Эриксона )

Answer 3

Ваш код выглядит нормально .. попробуйте добавить состояние в начало компонента.

state = { 
 value:null
 }