Как использовать mapStateToProps из angular6?

Я любитель React, я реализую Redux в приложении Angular, но у меня проблема с получением данных магазина с помощью mapStateToProps, как это сделать?

It is throwing an error store_1.connect is not a function

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgRedux, NgReduxModule, connect } from '@angular-redux/store';
import { IAppState, rootReducer, INITIAL_STATE } from './store';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgReduxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
    constructor (ngRedux: NgRedux<IAppState>) {
            ngRedux.configureStore(rootReducer, INITIAL_STATE);

    }
}

const mapStateToProps = (state) =>  {
   console.info(state);
   return {
     state
   }
}

export default connect(mapStateToProps, null)(AppModule);

В react-redux есть метод под названием mapStateToProps, я пробовал это, на самом деле ошибка возникла из angular-redux

— 30.06.2018 05:25

angular redux react-redux

30.06.2018 05:20

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

406

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

connect здесь нет. Когда вы работаете с Angular, вы в основном имеете дело с Observables из rxjs.

Библиотека @angular-redux/store использует Выбрать шаблон для доступа к хранилищу, потому что она очень эффективно подключается к механизму обнаружения изменений Angular.

Это дает нам два варианта:

Декоратор @select

// this selects `counter` from the store and attaches it to this property
// it uses the property name to select, and ignores the $ from it
@select() counter$;

// this selects `counter` from the store and attaches it to this property
@select() counter;

// this selects `counter` from the store and attaches it to this property
@select('counter') counterSelectedWithString;

// this selects `pathDemo.foo.bar` from the store and attaches it to this
// property.
@select(['pathDemo', 'foo', 'bar']) pathSelection;

// this selects `counter` from the store and attaches it to this property
@select(state => state.counter) counterSelectedWithFunction;

// this selects `counter` from the store and multiples it by two
@select(state => state.counter * 2)
counterSelectedWithFuntionAndMultipliedByTwo: Observable<any>;

Внедрение экземпляра NgRedux в конструктор (спасибо Угловой DI):

import * as CounterActions from '../actions/CounterActions';
import { NgRedux } from '@angular-redux/store';

@Component({
    selector: 'root',
    template: `
  <counter [counter] = "counter$| async"
    [increment] = "increment"
    [decrement] = "decrement">
  </counter>
  `
})
export class Counter {
  private count$: Observable<number>;

  constructor(private ngRedux: NgRedux<IAppState>) {}

  ngOnInit() {
    let {increment, decrement } = CounterActions;
    this.counter$ = this.ngRedux.select('counter');
  }

  incrementIfOdd = () => this.ngRedux.dispatch(
    <any>CounterActions.incrementIfOdd());

  incrementAsync = () => this.ngRedux.dispatch(
    <any>CounterActions.incrementAsync());
}

Вы можете думать об этом шаблоне как об эффективном аналоге reselect для мира Angular, насыщенного RxJS.

Полный пример см. В пример приложения или простой пример счетчика.

Это правильный способ подписаться на магазин, спасибо :)

— 09.07.2018 07:07

30.06.2018 06:25