Всякий раз, когда я нажимаю на эту кнопку «ОК», он должен добавлять данные к избыточному в контейнере / пользователе. Что мне нужно сделать, так это то, что всякий раз, когда я выполняю его, он должен быть добавлен в хранилище редуксов, я думаю, что это файлы, которые будут выполнять работу, оставляя отдельные действия. 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;