У меня есть приложение «Реакция-редукция». Я пытаюсь получить данные только в том случае, если в избыточном хранилище нет данных. Проверка магазина в действии с кодом ниже logi c выдает мне эту ошибку.
ReferenceError: Невозможно получить доступ к 'initialState' до инициализации
Почему журнал действий c запускается до инициализации хранилища?
Мой подход правильный ? Есть ли лучший способ добиться этого?
Как я могу исправить эту ошибку?
У меня есть действия и редуктор в одном файле. Я пытался разделить файл, но все равно получаю ту же ошибку.
import { Dispatch } from "redux";
import { Product } from "../../domain/interface";
import store from "../../redux";
export const RETRIEVE_PRODUCT_BEGIN = "RETRIEVE_PRODUCT_BEGIN";
export const RETRIEVE_PRODUCT_SUCCESS = "RETRIEVE_PRODUCT_SUCCESS";
export const RETRIEVE_PRODUCT_FAILURE = "RETRIEVE_PRODUCT_FAILURE";
interface RetrieveProductBeginAction {
type: typeof RETRIEVE_PRODUCT_BEGIN;
}
interface RetrieveProductSuccessAction {
type: typeof RETRIEVE_PRODUCT_SUCCESS;
name: string;
entities: Product[];
}
interface RetrieveProductFailureAction {
type: typeof RETRIEVE_PRODUCT_FAILURE;
errorMessage: string;
}
type ActionTypes =
| RetrieveProductSuccessAction
| RetrieveProductBeginAction
| RetrieveProductFailureAction;
export interface EntityState {
products: Product[];
apiStatus: string;
errorMessage: string;
}
const initialState: EntityState = {
products: [],
apiStatus: "",
errorMessage: ""
};
export function productReducer(
state = initialState,
action: ActionTypes
): EntityState {
const newState = { ...state };
switch (action.type) {
case RETRIEVE_PRODUCT_BEGIN:
newState.apiStatus = "BEGIN";
return newState;
case RETRIEVE_PRODUCT_SUCCESS:
newState.products = action.entities;
newState.errorMessage = "";
return newState;
case RETRIEVE_PRODUCT_FAILURE:
newState.errorMessage = action.errorMessage;
return newState;
default:
return state;
}
}
export function retrieveProductBegin(): ActionTypes {
return { type: RETRIEVE_PRODUCT_BEGIN };
}
export function retrieveProductSuccess(
name: string,
entities: Product[]
): ActionTypes {
return { type: RETRIEVE_PRODUCT_SUCCESS, name, entities };
}
export function retrieveProductFailure(errorMessage: string): ActionTypes {
return { type: RETRIEVE_PRODUCT_FAILURE, errorMessage };
}
export function loadProduct(name: string) {
const URL = "http://localhost:8080/api/products";
const products = store().getState().products;
if (products) {
return function(dispatch: Dispatch): Promise<void> {
return new Promise(function(resolve, reject) {
console.log("Product data exists for: " + name);
});
};
}
return async function(dispatch: Dispatch): Promise<void> {
try {
dispatch(retrieveProductBegin());
const response = await fetch(URL, {
method: "GET",
headers: { "content-type": "application/json" }
});
if (response.ok) {
const body = await response.json();
dispatch(retrieveProductSuccess(name, body));
} else {
const error = await response.text();
dispatch(retrieveProductFailure(error));
}
} catch {}
};
}