5

hello i'm try to user redux with angular. but i have this error message when i try to run my angular app:

ERROR in node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(10,31): error TS2420: Class 'NgRedux<RootState>' incorrectly implements interface 'ObservableStore<RootState>'.
  Types of property 'dispatch' are incompatible.
    Type 'Dispatch<RootState>' is not assignable to type 'Dispatch<AnyAction>'.
      Type 'RootState' is not assignable to type 'AnyAction'.
node_modules/@angular-redux/store/lib/src/components/ng-redux.d.ts(37,33): error TS2344: Type 'RootState' does not satisfy the constraint 'Action<any>'.
node_modules/@angular-redux/store/lib/src/components/root-store.d.ts(18,24): error TS2344: Type 'RootState' does not satisfy the constraint 'Action<any>'.
node_modules/redux-observable/index.d.ts(32,56): error TS2344: Type 'S' does not satisfy the constraint 'Dispatch<AnyAction>'.

my reducer:

export default function reducer(state= {
  persones: [],
  selectedPersone: {},
}, action) {
  let newState;
  switch (action.type) {
    case 'GET_PERSONNES':
      newState = { ...state, persones: action.payload };
      break;
    case 'SELECT_PERSONNE':
      newState = { ...state, selectedPersone: action.payload };
      break;
    case 'POST_PERSONNES':
      newState = { ...state, selectedPersone: action.payload };
      break;
    case 'PUT_PERSONNES':
      newState = { ...state, selectedPersone: {} };
      break;
    default:
      newState = state;
      break;
  }
  return newState;
}

my reducer index:

import { combineReducers } from 'redux';

import personnes from './personnes';

export default combineReducers({
  personnes,
} as any);

and my store :

import { createStore, applyMiddleware, Store } from 'redux';
import logger from 'redux-logger';
import { createEpicMiddleware } from 'redux-observable';
import { Observable } from 'rxjs';
import reducers from './reducers';
import 'rxjs';


const pingEpic = action$ =>
  action$.ofType('HTTP_GET')
    .debounceTime(500)
    .switchMap(action =>
      Observable.ajax.get(action.payload.url)
        .map((a:any) => {
          console.log(a);
          return { type: action.payload.action, payload: a.response };
        })
      );

const post = action$ =>
  action$.ofType('HTTP_POST')
    .debounceTime(500)
    .switchMap(action =>
      Observable.ajax.post(
        action.payload.url,
        action.payload.object,
      )
        .map((a) => {
          console.log(a);
          return { type: action.payload.action, payload: a.response };
        })
     );  

const put = action$ =>
  action$.ofType('HTTP_PUT')
    .debounceTime(500)
    .switchMap(action =>
      Observable.ajax.put(
        action.payload.url,
        action.payload.object,
      )
        .map((a) => {
          console.log(a);
          return { type: action.payload.action, payload: a.response };
        })
    );


const epicMiddleware = createEpicMiddleware(pingEpic);
const postMidelWare = createEpicMiddleware(post);
const putMidelWare = createEpicMiddleware(put);
export const middleware = applyMiddleware(logger, epicMiddleware, postMidelWare, putMidelWare);

export const store: Store<IAppState> = createStore(reducers, middleware);

can you help me ?

thanks you :)

C.OG
  • 6,236
  • 3
  • 20
  • 38
Michel Lammens
  • 591
  • 1
  • 4
  • 11

0 Answers0