Best way to use external functions (eg components that return nothing) in React redux app?

What you want is a custom hook, not a component. That would be the more "react-y" way to do it.

Custom hooks are functions that return objects, functions, or state, or nothing at all, but are allowed to use React hooks in them.

A refactor into a custom hook might look like this:

import { useEffect } from "react";

export const useSave = (destination) => {

  useEffect(()=>{
    console.log("destination has been edited")
    //save into DB
  }, [destination])

}

With this approach you would pass in destination from your component that uses it. Call it just like a function at the top of your component and pass in arguments.

So for instance, in your 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 is looking for the use keyword at the beginning of the function, that's how it knows it's a custom hook, and won't throw an error trying to use a React hook inside it.

Further

The return from the custom hook is very powerful, and can be used to return a function that dispatches to a reducer, or a valuable piece of state.

You would assign your hook to a variable and make use of it in your component.

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 }
}

Then in your component:

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
      }
    </>
  )
}

I am trying to save some data into DB whenever the state (using Redux) changes.

You could do this with redux listenerMiddleware to dispatch an asyncThunk to save your edited Destination to the db some time after the editing has stopped.

Example

const listenerMiddleware = createListenerMiddleware();

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

This helps to keep your react component fairly presentational.

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>}
    </>
  );
};

The redux slice looks pretty simple here, too. Another benefit is that all your state remains in the redux slice, instead of being spread between redux, a react component and a react custom hook.

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;
    });
  }
});

In this example, the thunk is just returning a resolved promise after one second. But here you could call your saveDestination api however you like.

export const saveDestination = createAsyncThunk(
  "destination/save",
  async ({ payload }) => {
    await wait(1000);
    return Promise.resolve(payload);
  }
);

function wait(milliseconds) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}