Lo que quiere es un gancho personalizado, no un componente. Esa sería la forma más "reactiva" de hacerlo.

Los ganchos personalizados son funciones que devuelven objetos, funciones o estados, o nada en absoluto, pero se les permite usar ganchos React en ellos.

Un refactor en un enlace personalizado podría verse así:

 import { useEffect } from "react"; export const useSave = (destination) => { useEffect(()=>{ console.log("destination has been edited") //save into DB }, [destination]) }

Con este enfoque, pasaría el destination desde su componente que lo usa. Llámelo como una función en la parte superior de su componente y pase los argumentos.

Entonces, por ejemplo, en su App :

 import { useSelector } from "react-redux"; import useSave from "./filepath/useSave.js" const App = () => { const destination = useSelector((configureStore) => configureStore.locations.destination ) useSave(destination) return (<></>) }

React está buscando la palabra clave use al comienzo de la función, así es como sabe que es un enlace personalizado y no arrojará un error al intentar usar un enlace React dentro de él.

Más lejos

El retorno del gancho personalizado es muy poderoso y se puede usar para devolver una función que se envía a un reductor o a una parte valiosa del estado.

Asignaría su gancho a una variable y lo usaría en su componente.

Ex:

 import { useEffect, useState } from "react"; import { useDispatch } from "react-redux"; import { setSomeState } from "path/to/reducer.js" export const useSave = (destination) => { const [saving, setSaving] = useState(false) const dispatch = useDispatch() useEffect(()=>{ console.log("destination has been edited") setSaving(true) //save into DB setSaving(false) }, [destination]) const updateStore = (state) => { dispatch(setSomeState(state)) } return { saving, updateStore } }

Luego en tu componente:

 import { useSelector } from "react-redux"; import useSave from "./filepath/useSave.js" const App = () => { const destination = useSelector((configureStore) => configureStore.locations.destination ) const { saving, updateStore } = useSave(destination) return ( <> {saving ? <h1>Saving...</h1> : <button onClick={updateStore}>Set</button } </> ) }

Estoy tratando de guardar algunos datos en DB cada vez que cambia el estado (usando Redux).

Puede hacer esto con reduxlistenerMiddleware para enviar un asyncThunk para guardar su destino editado en la base de datos algún tiempo después de que se haya detenido la edición.

Ejemplo

 const listenerMiddleware = createListenerMiddleware(); listenerMiddleware.startListening({ actionCreator: actions.edit, effect: async (action, listenerApi) => { listenerApi.cancelActiveListeners(); await listenerApi.delay(1000); listenerApi.dispatch(saveDestination({ ...action })); } });

Esto ayuda a mantener su componente de reacción bastante presentacional.

 import React from "react"; import { useSelector, useDispatch } from "react-redux"; import { actions } from "./destinationSlice"; export const Destination = () => { const { edit, data, loading } = useSelector((state) => state.destination); const dispatch = useDispatch(); return ( <> <label> edit destination: <input value={edit} onChange={(e) => dispatch(actions.edit(e.currentTarget.value))} /> </label> <label> saved destination: <input value={data} readOnly /> </label> {loading && <p>saving</p>} </> ); };

La porción redux también parece bastante simple aquí. Otro beneficio es que todo su estado permanece en la porción redux, en lugar de distribuirse entre redux, un componente de reacción y un gancho personalizado de reacción.

 export const slice = createSlice({ name: "destination", initialState: { loading: false, edit: "", data: "" }, reducers: { edit: (state, { payload }) => { state.edit = payload; } }, extraReducers: (builder) => { builder.addCase(saveDestination.pending, (state) => { state.loading = true; }); builder.addCase(saveDestination.fulfilled, (state, { payload }) => { state.data = payload; state.loading = false; }); builder.addCase(saveDestination.rejected, (state) => { state.loading = false; }); } });