Формы с Redux

Question

Я не хочу использовать избыточную форму, я хотел бы отправить все значения формы в контейнерное место. Вопрос в том, как получить заголовок и контент (вместе) с помощью функции handleChange

Файл контейнера выглядит так:

import { connect } from "react-redux";
import AddPost from "../components/Posts/AddPost";
import { updateNewPost, clearNewPost } from "../actions/new-post";
import { createPost } from "../actions/posts";

const mapStateToProps = ({ title, content, auth }) => {
  return { title, content, auth };
};

const mapDispatchToProps = dispatch => {
  return {
    handleChange(event) {
      dispatch(updateNewPost(event.target.value));
    },
    handleSubmit(event, title, content, uid) {
      event.preventDefault();
      dispatch(createPost({ title, content, uid }));
      dispatch(clearNewPost());
    }
  };
};

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

Файл компонента выглядит следующим образом:

import React, { PropTypes } from "react";

const AddPost = ({ title, content, auth, handleChange, handleSubmit }) => (
  <form onSubmit={event => handleSubmit(event, title, content, auth.uid)}>
    <input
      type="text"
      placeholder="title"
      value={title}
      onChange={handleChange}
    />
    <input
      type="text"
      placeholder="content"
      value={content}
      onChange={handleChange}
    />
    <input type="submit" value="Post" />
  </form>
);

AddPost.propTypes = {
  title: PropTypes.string,
  content: PropTypes.string,
  auth: PropTypes.object,
  handleChange: PropTypes.func,
  handleSubmit: PropTypes.func
};

export default AddPost;

спасибо за помощь

Answer 1

Вы неправильно поняли излишнюю часть. Что вы хотите сделать, это установить ключ в вашем магазине для каждого значения и обновить его соответствующим образом.

// store
const store = {
    title: "",
    content: ""
}

// reducer
const reducer = (state, action) => {
   switch(action.type) {
      case "UPDATE":
         return Object.assign({}, state, {[action.field]: action.payload});
      default:
        return state;
   }
}

// action creator
const updateField = (value, field) {
    return {
        type: "UPDATE",
        payload: value
        field
    };
}

// form input
<input
  type="text"
  placeholder="title"
  value={title}
  onChange={(e) => updateField(e.taget.value, "title")}
/>
<input
  type="text"
  placeholder="content"
  value={content}
  onChange={(e) => updateField(e.taget.value, "content")}
/>

Другим вариантом является преобразование вашей функции без сохранения состояния в класс и локальное управление состоянием входных данных, а затем после проверки правильности ваших данных вы можете отправить одно действие, которое будет содержать все.

// form component
class Form extends React.Component {
    constructor() {
        super();

        this.state = {title: "", content: ""};

        this.validateAndSubmit = this.validateAndSubmit.bind(this);
    }

    validateAndSubmit() {
        const {title, content} = this.state;

        if (!title.length || !content.length)
            return;

        this.props.submitFormData({title, content});
    }

    render() {
        return (
          <div>
            <input
                type="text"
                placeholder="title"
                value={this.state.title}
                onChange={(e) => this.setState({title: e.target.value}, this.validateAndSubmit)}/>
            <input
                type="text"
                placeholder="content"
                value={content}
                onChange={(e) => this.setState({content: e.target.value}, this.validateAndSubmit)}/>
          </div>
        );
    }

}

// action creator
const submitFormData = (data) => {
    return {
        type: "COMPLETE",
        payload: data
    };
}

// reducer
const reducer = (state, action) => {
   switch(action.type) {
       case "COMPLETE":
           // you have your form data here...
       default:
           return state;
   }
}

Этот код не проверен, но я надеюсь, что вы поняли идею. Удачи:)