Skip to content

Instantly share code, notes, and snippets.

Avatar

Chidume Nnamdi philipszdavido

View GitHub Profile
View example_reducer.ts
export function reducer(state = initialState, action:articles.Actions):State {
switch(action.type){
case ADD_ARTICLE:
return {
articles: [...state.articles,action.payload]
}
default:
return state;
}
}
View example_action.ts
export interface Action {
type : string,
payload?: any
}
dispatch({type:’ADD_ARTICLE’,payload:{
link:’github.com/philipszdavido’,
points:90
}
})
dispatch({type:’LOAD_LINKS’})
View angular-cli.json
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"app/theme.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
View article-model.ts
//src/app/redux/models/article
export class Article {
id: number
link : string
title : string
points : number
constructor(id: number, title: string, link: string, points?: number) {
this.id = id
this.title = title;
this.link = link;
View article-actions.ts
//src/app/redux/actions/articles.ts
import { Action } from '@ngrx/store';
import { Article } from '../models/article';
export const ActionTypes = {
LOAD_ARTICLES:'Load Articles',
ADD_ARTICLE: 'Add Article',
INCREMENT_ARTICLE_POINT: 'Increment Article Point',
DECREMENT_ARTICLE_POINT: 'Decrememnt Article Point'
}
View article-reducer.ts
//src/app/redux/reducer/articles.ts
import * as articles from '../actions/articles';
import { Article } from '../models/article';
export interface State {
articles : Array<Article>,
};
export const initialState : State = {
articles : [],
};
View line1.ts
export const getArticles = (state : State) => state.articles;
View reducer-index.ts
//src/app/redux/reducer/index.ts
import {
combineReducers,
ActionReducer,
ActionReducerMap,
createSelector,
createFeatureSelector,
META_REDUCERS
} from '@ngrx/store';
import * as fromArticle from '../reducer/articles';
View line2.ts
//src/app/redux/reducer/index.ts
import * as fromArticle from '../reducer/articles';
export interface State {
articles:fromArticle.State,
}
View line3.ts
//src/app/redux/reducer/index.ts
export const getArticleState = (state : State) => state.articles;
export const getArticles = createSelector(getArticleState,fromArticle.getArticles);