ngrx/store 的学习

# Action
示例 1
import { Action, createAction} from '@ngrx/store';

// export enum LoaddingActionTypes {
//   ShowLoad = '[Test] show load',
//   HideLoad = '[Test] hide load',
// }

// export class ShowLoad implements Action {
//   readonly type = LoaddingActionTypes.ShowLoad;
// }

// export class HideLoad implements Action {
//   readonly type = LoaddingActionTypes.HideLoad;
// }
export const ShowLoad = createAction('[show load]');
export const HideLoad = createAction('[hide load]');
示例 2
import { createAction, props } from '@ngrx/store';

export interface Song {
  id: number;
  name: string;
  url: string;
  dt: number;
}


export const SetPlaying = createAction('[player] set playing', props<{ playing: boolean }>());
export const SetPlayList = createAction('[player] Set playList', props<{ playList: Song[] }>());
export const SetSongList = createAction('[player] Set songList', props<{ songList: Song[] }>());
export const SetCurrentIndex = createAction('[player] Set currentIndex', props<{ currentIndex: number }>());

通过使用createAction可以简化创建过程， props为是否需要接受参数
通过store.dispatch(youaction(props))来触发一个reducer

# reducer
示例 1
// import { Action } from '@ngrx/store';
// import { LoaddingActionTypes } from '../actions/loadding.actions';

// export const initialState = false;

// export function loadReducer(state = initialState, action: Action): boolean {
//   switch (action.type) {
//     case LoaddingActionTypes.ShowLoad:
//       return true;
//     case LoaddingActionTypes.ShowLoad:
//       return false;
//     default:
//       return state;
//   }
// }
示例 2
import { ShowLoad, HideLoad } from '../actions';
import { createReducer, on, Action } from '@ngrx/store';

export const initialState = false;

const reducer = createReducer(
  initialState,
  on(ShowLoad, (state) => true),
  on(HideLoad, (state) => false)
);

export function loadReducer(state: boolean, action: Action) {
  return reducer(state, action);
}
import { Song, SetPlaying, SetPlayList, SetSongList, SetCurrentIndex } from '../actions/player.actions';
import { createReducer, on, Action } from '@ngrx/store';

export interface PlayState {
  playing: boolean;
  songList: Song[];
  playList: Song[];
  currentIndex: number;
}

export const initialState: PlayState = {
  playing: false,
  songList: [],
  playList: [],
  currentIndex: -1,
};

const reducer = createReducer(
  initialState,
  on(SetPlaying, (state, { playing }) => ({ ...state, playing })),
  on(SetPlayList, (state, { playList }) => ({ ...state, playList })),
  on(SetSongList, (state, { songList }) => ({ ...state, songList })),
  on(SetCurrentIndex, (state, { currentIndex }) => ({ ...state, currentIndex })),
);

export function playerReducer(state: PlayState, action: Action) {
  return reducer(state, action);
}

通过createReducer可以简化reducer的创建过程
步骤为 
1、定义接口模型（为所需的state）
2、根据模型设定初始值
3、创建reducer
4、导出创建的reducer关联state

通过select(state).subscripe(res => console.log(res))可以获取到值

# selector 
示例 1
import { createSelector } from '@ngrx/store';
import { State } from '../reducers';
const currentLoadding = (state: State) => state;

export const getCurrentLoadding = createSelector(currentLoadding, (state: State) => state.loadding);
示例2
import { PlayState } from '../reducers/player.reducer';
import { createSelector } from '@ngrx/store';
const selectPlayerStates = (state: PlayState) => state;

export const getPlaying = createSelector(selectPlayerStates, (state: PlayState) => state.playing);
export const getPlayList = createSelector(selectPlayerStates, (state: PlayState) => state.playList);
export const getSongList = createSelector(selectPlayerStates, (state: PlayState) => state.songList);
export const getCurrentIndex = createSelector(selectPlayerStates, (state: PlayState) => state.currentIndex);

export const getCurrentSong = createSelector(selectPlayerStates, ({ playList, currentIndex }: PlayState) => playList[currentIndex]);

selector 不是必须要的，因为在reducer中定义好了state，定义selector只是为了方便获取到值
select(getCurrentLoadding)  <===> select('loadding')