реагирует на редукционный магазин, который не обновляется при нажатии или нажатии кнопки - PullRequest
0 голосов
/ 17 марта 2020

Всякий раз, когда я нажимаю на эту кнопку «ОК», он должен добавлять данные к избыточному в контейнере / пользователе. Что мне нужно сделать, так это то, что всякий раз, когда я выполняю его, он должен быть добавлен в хранилище редуксов, я думаю, что это файлы, которые будут выполнять работу, оставляя отдельные действия. js и другие были определены хорошо, даже console.log для Функция дает нам значение, но не хранит его в избыточном.

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

AddReminderModel .jsx

    import React, { useState } from 'react';
import PropTypes from 'prop-types';

import { Modal } from 'antd';
import { FormattedMessage } from 'react-intl';

import { AddReminder } from 'components/AddReminder';

export default function AddReminderModal({ isVisible, setVisible }) {
  const [confirm, setConfirm] = useState(false);

  return (
    <Modal
      visible={isVisible}
      title={<FormattedMessage id="ADD_REMINDER" />}
      onCancel={() => setVisible(false)}
      zIndex={1100}
      okText={<FormattedMessage id="ADD_REMINDER_CONFIRM_BUTTON" />}
      width={760}
      onOk={() => {
        setConfirm(true)
      }}
    >
      <AddReminder confirmAdd={confirm}/>
    </Modal>
  );
}

AddReminderModal.propTypes = {
  isVisible: PropTypes.bool.isRequired,
  setVisible: PropTypes.func.isRequired,
};

Затем другой файл AddReminder.component.jsx

    import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';

import { AddReminderNote } from './AddReminderNote'
import { Calendar } from '../Calendar';

import { saveReminderAction } from './actions';
import './AddReminder.style.css';

function AddReminderComponent({addReminder, confirmAdd}) {
  const [date, setDate] = useState(new Date());
  const [note, setNote] = useState('');

  const onDateChange = date => {
    setDate(date)
  };

  const onNoteChange = event => {
    setNote(event.target.value);
  };

  const add = () => {
    addReminder({
      date: date,
      note: note
    });

  console.log(date,note)
  }

  useEffect(() => {
    if (confirmAdd) {
      add();
    }
  }, [confirmAdd]);

  return (
    <div className="add-reminder">
      <Calendar onChange={onDateChange} />
      <AddReminderNote onChange={onNoteChange} />
    </div>
  );
}

function mapDispatchToProps(dispatch, ownProps) {
  return {
    confirmAdd: ownProps.confirmAdd,
    addReminder: reminder => dispatch(saveReminderAction(reminder)),
  };
}

const withConnect = connect(
  null,
  mapDispatchToProps,
);

export default compose(withConnect)(AddReminderComponent);

это редуктор. js

/*
 * GlobalReducer
 *
 * The reducer takes care of our data. Using actions, we can
 * update our application state. To add a new action,
 * add it to the switch statement in the reducer function
 *
 */

import produce from 'immer';

import { SET_HOME } from './constants';

export const initialState = {
  home: '/sales',
  name: 'Max Mustermann',
  designRequests: [
    {
      id: '123456',
      clerk: 'Max',
      type: 'Muster',
      note: 'Neuentwicklung für Intersnack',
      href: '/design_requests/123456',
    },
    {
      id: '234567',
      clerk: 'Max Mustermann',
      type: 'Scribble/Grafik',
      note: '3D Bild von 2 Seiten erstellen',
      href: '/design_requests/234567',
    },
    {
      id: '345678',
      clerk: 'Max Mustermann',
      type: 'Ausrechnung',
      note: 'Kostenberechnung für 1/8 Display',
      href: '/design_requests/345678',
    },
  ],
  reminders: [
    {
      id: '1',
      date: '02.03.2020',
      note: 'Entwicklungsstand bei Displayentwicklung nachfragen',
      href: '/design_requests/123456',
    },
    {
      id: '2',
      date: '04.03.2020',
      note: 'Werkzeugbestellung 7483934 checken',
      href: '/order/7483934',
    },
  ],
};

/* eslint-disable default-case, no-param-reassign */
const userReducer = (state = initialState, action) =>
  produce(state, draft => {
    switch (action.type) {
      case SET_HOME:
        draft.home = action.path;
        break;
    }
  });

userReducer.key = 'user';

export default userReducer;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...