Question

我想编写使用angular-redux进行按钮切换的动作。我在角度4中创建了与此类似的浮动按钮 Fab button

现在为同一个编写动作和减速器，我已经创建了很少的东西，但是我不确定我是否以正确的方式进行操作，因为我是redux的新手，这是我的第一个减速器和动作文件，我不确定我在这里写的。检查以下代码：

fab-button-actions.ts

import { Injectable } from '@angular/core';
import { Action } from 'redux';
import { NgRedux, dispatch } from '@angular-redux/store';
import { IAppState } from '../../../../store/';
import {
    AppConfigService,
    UIService,
} from '../../../../core/';

import { Subscription } from 'rxjs/Subscription';

/** This actions is used to start and stop the polling for the component
 * that needs to dispatch those actions
 *
 * @example
 *
 * fabButtonActions
 *
 */
@Injectable()
export class FabButtonActions {
    /* *
      * For Redux
      * Use this manage the ACTIONS of the reducer
    */
    static readonly ACTIONS = {
        OPEN: 'OPEN',
        CLOSE: 'CLOSE',
    };
    /* * @constructor
       *
       * initializes the FabButtonActions
       * initializes the NgRedux<IAppState>
    * */
    constructor(private ngRedux: NgRedux<IAppState>) { }
    /* *
    * Dispatches action to fab button reducer
    * to open the
    */
    openFabMenu() {
        this.ngRedux.dispatch({
            type: FabButtonActions.ACTIONS.OPEN,
        });
    }
    closeFabMenu() {
        this.ngRedux.dispatch({
            type: FabButtonActions.ACTIONS.CLOSE,
        });
    }
}

Fab-button.reducer.ts

import { Reducer } from 'redux';
import { FabButtonActions } from '../actions';

export interface FabButtonState {
  fabButtonOpen: boolean;
  fabButtonClose: boolean;
}

export const initialFabButtonState: FabButtonState = {
  fabButtonOpen: false,
  fabButtonClose: false,
};

export const fabButtonReducer: Reducer<FabButtonState> = (
  state = initialFabButtonState,
  action,
) => {
  switch (action.type) {
    case FabButtonActions.ACTIONS.OPEN:
      return {
        ...state,
        fabButtonOpen: true,
      };
    case FabButtonActions.ACTIONS.CLOSE:
      return {
        ...state,
        fabButtonClose: true,
      };
    default:
      return state;
  }
};

请帮助我。或指导一些与我的示例相符的操作。

Redux操作以角度4切换按钮

0 个答案: