¿Cómo puedo pasar algo del contexto React a mi función Redux Saga?
Tengo un valor de contexto que podría recuperar en los componentes de reacción con algo como esto
const { connectionObject } = useMyContext(); Esto me permitiría obtener la instancia de connectionObject del contexto.
Sin embargo, también estoy usando redux saga en otras partes de mi aplicación. Una de estas sagas redux necesitará usar el personObject del contexto.
Dado que Redux-Sagas son técnicamente solo funciones generadoras regulares, no puedo usar useMyContext() para recuperar el objeto de connectionObject . Por ejemplo, esto no funcionaría.
export function* saveData() { const { connectionObject } = useMyContext(); // This will not work yield performSaveSomething(connectionObject); } La saga Redux se activa cuando envío una acción redux desde dentro de un componente de reacción. Por supuesto, una posible solución alternativa podría ser obtener el objeto de connectionObject del contexto en el componente de reacción y luego enviar la acción con el objeto de connectionObject como parte de la carga útil que luego lo pasa a la saga. Pero esto se siente totalmente anti-patrón y no es elegante, especialmente cuando se supone que la carga útil debe actualizarse al estado, pero en este caso solo se usa para pasar a la saga. Aquí hay un ejemplo para ilustrar la incomodidad:
// In the React component export const myReactComponent = (props) => { const { connectionObject } = useMyContext(); dispatch(saveDataAction({ data: 'some data here to be put in the redux store', connection: connectionObject })); } // In the reducer function reducer (state, action) { switch (action.type) { case SAVE_DATA_ACTION_TYPE: // action.payload has 2 attributes in this case: data and connection // But I am throwing away the connection one here in this reducer because that is only meant for the saga. Feels weird here. return { ...state, data: action.payload.data. // Instead of using the whole payload, I've to use only the "data" attribute of the payload because only this mattered to the store. I can't use the whole payload because it has the connectionObject in there. Doesn't look elegant. } } } // And finally in the saga function export function* saveData({ payload: { connection } }) { // Good thing here is I could finally access the connectionObject which came from the react context // However, it's also doesn't seem right that I'm passing the connectionObject through the payload which isn't a piece of data but as a dependency yield performSaveSomething(connection); }¿Hay alguna manera en la que pueda pasar con elegancia y facilidad un valor recuperado del contexto React y de alguna manera pasarlo a mi función Redux-Saga para que pueda usarlo?
Mi primera inclinación es hacer lo que me propusiste: incluirlo en el payload de la acción. El componente conoce el valor, la saga necesita el valor, por lo tanto, puede pasar el valor. Esta es probablemente la solución más simple.
Aparte de eso... depende un poco de la naturaleza del valor del contexto. Comencemos con el caso más simple y pasemos a los más difíciles. Caso más simple: solo hay una copia del contexto y su valor nunca cambia. Si nunca cambia, entonces en realidad no necesita estar en contexto. Simplemente puede mover el objeto de conexión a un archivo, exportarlo y luego importarlo donde sea necesario.
Pero está usando contexto, por lo que probablemente sea un valor que cambie. Eso nos lleva al siguiente caso: solo hay una copia, su valor cambia , pero solo los componentes se preocupan cuando cambia (la saga solo lo buscará cuando sea necesario y no necesita ser notificado). Para esto, probablemente haría que el proveedor de contexto duplique su estado en una variable global, que la saga verifica.
let globalValue = {}; export const getGlobalValue = () => globalValue; export const MyContextProvider = ({ children }) => { const [stateValue, setStateValue] = useState({}); useEffect(() => { globalValue = stateValue; }, [stateValue]); return ( <MyContext.Provider value={stateValue}> {children} </MyContext.Provider> ) } // In the saga: import { getGlobalValue } from './path/to/context/provider/file export function* saveData() { const connectionObject = getGlobalValue(); yield performSaveSomething(connectionObject); }El siguiente paso en dificultad es donde solo hay una copia, el valor cambia y tanto los componentes como las sagas deben poder escuchar los cambios en su valor. Por ejemplo, tal vez la saga comience, verifique el valor y, si ve que el valor es falso, debe dormir hasta que el valor se vuelva verdadero.
Para respaldar esto, necesitará tener algún tipo de emisor de eventos al que la saga pueda suscribirse. Hay muchas bibliotecas existentes para este tipo de código, puede crear la suya propia, algo como:
let listeners = []; export const subscribe = (callback) => { listeners.push(callback); const unsubscribe = () => { let i = listeners.indexOf(callback); listeners.splice(i, 1); } return unsubscribe; } export const MyContextProvider = ({ children }) => { const [stateValue, setStateValue] = useState({}); useEffect(() => { for (const listener of [...listeners]) { callback(stateValue); } }, [stateValue]); // ... }Y finalmente, el caso más difícil: hay múltiples proveedores de contexto. Si ese es el caso, entonces hay múltiples valores posibles, y no hay forma de que la saga sepa cuál usar. No hay forma excepto decirlo, por supuesto, lo que harías a través de la carga útil de la acción, lo que nos lleva de vuelta a la idea original.
Supongo que sería posible no pasar el objeto completo, sino solo una identificación, y luego usar una de las técnicas anteriores para buscar el objeto. Pero no veo que eso sea mejor que pasar el objeto en sí.