redux-injectors: Utilizando yield select en la saga antes de que se inyecten el reductor y la saga.

Hola, esta es mi primera pregunta. Estoy tratando de configurar un proyecto en el que los módulos junto con Redux y Sagas se inyectarán en la aplicación principal utilizando redux-injectors. En mis sagas quiero usar ‘yield select’ para comprobar si una acción ha actualizado el estado y luego continuar. Por ejemplo, cuando publico una imagen, quiero asegurarme de que no haya errores al publicar el archivo y luego seguir adelante. Uso la siguiente función:

export const imageErrors = (state: RootState): IImagesErrorState => state.image.errors

y luego en el archivo saga.ts lo uso de la siguiente manera:

let imagesErrors: IImagesErrorState = yield select(imageErrors) if (imagesErrors?.postImageError !== null) { throw imagesErrors.postImageError }

Esto funciona bien siempre y cuando el state.image exista en el estado raíz desde el principio. Sin embargo, ¿cómo lo hago cuando quiero inyectar este estado más adelante usando useInjectReducer y useInjectSaga? Obviamente, obtengo un error:

Property 'image' does not exist on type 'Reducer<combinedstate<{ user:="" combinedstate<{="" auth:="" iauthstate;="" errors:="" ierrorstate;="" }="">; }>, AnyAction>'.ts(2339)

Entonces, ¿cómo manejamos los selectores de piezas específicas del estado, ya que el estado aún no los incluye?
Muchas gracias.</combinedstate<{>

davy.ai

July 30, 2023 at 12:15 am

Para manejar selectores de piezas específicas de estado que aún no están incluidas en el estado raíz, debes asegurarte de combinar el nuevo reductor con los existentes utilizando la función combineReducers. Esto garantizará que la nueva pieza de estado se agregue al estado raíz y se pueda acceder a ella más adelante mediante selectores.

Por ejemplo, supongamos que deseas añadir una nueva pieza de estado llamada “image” al estado raíz utilizando redux-injectors. Puedes definir un nuevo reductor para esta pieza de estado y combinarlo con los reductores existentes de la siguiente manera:

import { combineReducers } from 'redux';
import { createSlice } from '@reduxjs/toolkit';

interface IImageState {
  errors: IImagesErrorState;
  // otras propiedades aquí
}

const initialState: IImageState = {
  errors: { /* errores iniciales aquí */ },
  // otro estado inicial aquí
};

const imageSlice = createSlice({
  name: 'image',
  initialState,
  reducers: {
    // acciones del reductor aquí
  }
});

export const { actions } = imageSlice;
export default imageSlice.reducer;

// combinar reductores
const rootReducer = combineReducers({
  // reductores existentes aquí
  image: imageSlice.reducer,
});

Ahora, puedes usar la función select como antes para acceder a la nueva pieza de estado:

export const imageErrors = (state: RootState): IImagesErrorState => state.image.errors;

// usar en archivo saga.ts
let imagesErrors: IImagesErrorState = yield select(imageErrors);
if (imagesErrors?.postImageError !== null) {
  throw imagesErrors.postImageError;
}

Al combinar el nuevo reductor con los reductores existentes mediante combineReducers, te aseguras de que la nueva pieza de estado esté incluida en el estado raíz y se pueda acceder a ella mediante selectores más adelante.

Answer

davy.ai

July 30, 2023 at 12:15 am
Para manejar selectores de piezas específicas de estado que aún no están incluidas en el estado raíz, debes asegurarte de combinar el nuevo reductor con los existentes utilizando la función combineReducers. Esto garantizará que la nueva pieza de estado se agregue al estado raíz y se pueda acceder a ella más adelante mediante selectores.

Por ejemplo, supongamos que deseas añadir una nueva pieza de estado llamada “image” al estado raíz utilizando redux-injectors. Puedes definir un nuevo reductor para esta pieza de estado y combinarlo con los reductores existentes de la siguiente manera:
```
import { combineReducers } from 'redux';
import { createSlice } from '@reduxjs/toolkit';

interface IImageState {
  errors: IImagesErrorState;
  // otras propiedades aquí
}

const initialState: IImageState = {
  errors: { /* errores iniciales aquí */ },
  // otro estado inicial aquí
};

const imageSlice = createSlice({
  name: 'image',
  initialState,
  reducers: {
    // acciones del reductor aquí
  }
});

export const { actions } = imageSlice;
export default imageSlice.reducer;

// combinar reductores
const rootReducer = combineReducers({
  // reductores existentes aquí
  image: imageSlice.reducer,
});
```
Ahora, puedes usar la función select como antes para acceder a la nueva pieza de estado:
```
export const imageErrors = (state: RootState): IImagesErrorState => state.image.errors;

// usar en archivo saga.ts
let imagesErrors: IImagesErrorState = yield select(imageErrors);
if (imagesErrors?.postImageError !== null) {
  throw imagesErrors.postImageError;
}
```
Al combinar el nuevo reductor con los reductores existentes mediante combineReducers, te aseguras de que la nueva pieza de estado esté incluida en el estado raíz y se pueda acceder a ella mediante selectores más adelante.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

redux-injectors: Utilizando yield select en la saga antes de que se inyecten el reductor y la saga.

Answer

davy.ai