Отобразить значение input через React-Redux

162

20 января 2022, 02:10

Я знаю, как получить данные из input конкретно через React(setState и тд), но через React-Redux (reducer) не имею представления. Будет ли правильно, имея систему store(reducers и actions), использовать setState в рамках компонента с input? Если нет,то как иначе?

const AddItem = props => {
  const { addItem } = props;
  return (
    <Form>
      <Input
        type="text"
        placeholder="Add new action"
        style={{ width: "300px" }}
      />
      <Button
        type="primary"
        onClick={() => {
          addItem
        }}
      >
        Add
      </Button>
    </Form>
  );
};

Answer 1

npm i redux-form
Создаём форму

const AddItemForm = ({handleSubmit, error}) => {
    return (
        <form onSubmit={handleSubmit}>
            <div>
                <Field name={"name"} component={'input'} label="Элемент"/>
            </div>
            {error &&
            <div>
                {error}
            </div>
            }
            <div>
                <button type={"submit"}>Добавить</button>
            </div>
        </form>
    )
};
const AddItemReduxForm = reduxForm({
    form: 'addItemForm'
})(AddItemForm);
const AddItem = (props) => {
    const onSubmit = (formData) => {
        Какой-нибудь action из reducerA
    };
    return (
        <div>
            <div>Добавление Элемента</div>
            <AddItemReduxForm onSubmit={onSubmit} />}
        </div>
    );
};
export default AddItem;

Если что-то непонятно лучше прочитать доки или посмотреть офигенный курс https://www.youtube.com/watch?v=Zgd9IlbhDcU&list=PLcvhF2Wqh7DNVy1OCUpG3i5lyxyBWhGZ8
Если я где-то ошибся - говорите