Angular - Redux Thunk未定义

npm install redux-thunk

yarn add redux-thunk

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // 假设你有一个根reducer

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

npm install ngrx-store-freeze redux-thunk

import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { storeFreeze } from 'ngrx-store-freeze';
import { rootReducer } from './reducers';
import { MyEffects } from './my-effects';

@NgModule({
  imports: [
    StoreModule.forRoot(rootReducer, { metaReducers: [storeFreeze] }),
    EffectsModule.forRoot([MyEffects]),
  ],
})
export class AppModule {}

import { createAction, props } from '@ngrx/store';

export const fetchData = createAction('[Data] Fetch Data');
export const fetchDataSuccess = createAction('[Data] Fetch Data Success', props<{ data: any }>());
export const fetchDataFailure = createAction('[Data] Fetch Data Failure', props<{ error: any }>());

export const fetchDataThunk = () => async (dispatch) => {
  dispatch(fetchData());
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    dispatch(fetchDataSuccess({ data }));
  } catch (error) {
    dispatch(fetchDataFailure({ error }));
  }
};

import { Store } from '@ngrx/store';
import { fetchDataThunk } from './data.actions';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private store: Store) {
    this.store.dispatch(fetchDataThunk());
  }
}