代码之家 › 专栏 › 技术社区 › Gopinath Kaliappan

如何使用Angular6中的MapStateToprops?

react-redux redux angular

Gopinath Kaliappan · 技术社区 · 6 年前

我是一个react爱好者,我在angular应用程序中实现redux,但是我在使用mapstatetrops获取存储数据时遇到了问题,如何做到这一点?

它正在抛出错误存储区。连接不是函数

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.log(state);
   return {
     state
   }
}

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

1 回复 | 直到 6 年前

yurzui 6 年前

没有 connect 在这里。当你处理角度时,你主要处理来自rxjs的观测数据。

@angular-redux/store 图书馆使用 Select Pattern 因为它能很有效地插入到角度变化检测机制中。

它给了我们两个选择:

@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实例 (多亏了 Angular 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 对于RXJS重角度世界。

完整示例请参见 example-app 或 simple counter example