Чтобы изменить объект в хранилище Redux при помощи редактирования, вы можете использовать следующий подход:
Шаг 1: Создайте экшены и редюсеры для редактирования объекта.
1. Создайте экшен `editObject`, который принимает обновленные данные и идентификатор объекта:
```javascript
export const editObject = (id, updatedData) => {
return {
type: 'EDIT_OBJECT',
payload: { id, updatedData }
}
}
```
2. В редюсере добавьте обработку этого экшена для обновления объекта в состоянии:
```javascript
const initialState = {
objects: []
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'EDIT_OBJECT':
const { id, updatedData } = action.payload;
const objects = state.objects.map(obj => {
if (obj.id === id) {
return { ...obj, ...updatedData };
}
return obj;
});
return { ...state, objects };
default:
return state;
}
}
```
Шаг 2: Создайте компонент редактирования, который будет отображать данные из объекта и позволять их редактировать.
```javascript
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { editObject } from './actions';
const EditObjectForm = ({ objectId }) => {
const object = useSelector(state => state.objects.find(obj => obj.id === objectId));
const dispatch = useDispatch();
const [data, setData] = useState(object);
const handleInputChange = (e) => {
const { name, value } = e.target;
setData({ ...data, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
dispatch(editObject(objectId, data));
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="property1" value={data.property1} onChange={handleInputChange} />
<input type="text" name="property2" value={data.property2} onChange={handleInputChange} />
<button type="submit">Сохранить</button>
</form>
);
}
export default EditObjectForm;
```
Теперь вы можете использовать компонент `EditObjectForm` для отображения данных из объекта в форме и их последующего редактирования.
```javascript
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducer';
import EditObjectForm from './EditObjectForm';
const store = createStore(reducer);
const App = () => {
const objectId = 123; // Замените на реальный идентификатор объекта
return (
<Provider store={store}>
<EditObjectForm objectId={objectId} />
</Provider>
);
}
export default App;
```
При нажатии на кнопку сохранить, данные объекта будут обновлены в хранилище Redux, а не создан новый объект.