jgab-net / angular-redux-example Goto Github PK

View Code? Open in Web Editor NEW

This is a POC project to demonstrate how redux is integrated with Angular 6 and RxJs

License: MIT License

HTML 5.46% TypeScript 55.92% CSS 36.16% JavaScript 2.46%

angular-redux-example's Introduction

Angular Redux Example

This is a POC project to learn how redux is integrated with Angular and RxJs.
todo style based on https://github.com/sitepoint-editors/angular-todo-app

How to use redux with Angular

lets start with some installation

npm install redux --save
npm install @angular-redux/store@^9 --save // for angular 6 or ^7 for angular 5
npm install redux-observable --save

Store

Create a folder called store, this will be the main module for initializing redux.
Here is the store module:

const epicMiddleware = createEpicMiddleware();

const initialState: AppState = {
	todo: {
		items: [
			{
				description: "add redux today",
				id: "add redux today"
			},
			{
				description: "some another todo",
				id: "some another todo"
			},
			{
				description: "last one",
				id: "last one"
			}
		]
	},
	login: {
		credentials: {
		}
	}
};


@NgModule({
	imports: [NgReduxModule],
	providers: [
		TodoEpics
	]
})
export class StoreModule {
	constructor(private store: NgRedux<AppState>, private todoEpics: TodoEpics) {
		const rootEpic = combineEpics(
			...this.todoEpics.getEpics()
		);
		const middelwares = [epicMiddleware]
		const devMiddelwares = [...middelwares, createLogger()];
		const prodMiddelwares = [...middelwares];

		store.configureStore(
			rootReducer,
			initialState,
			environment.production ? prodMiddelwares : devMiddelwares);

		epicMiddleware.run(rootEpic)
	}
}

store.configureStore receiving 3 params:
1. root reducer
2. initial state
3. middlewares

the rootReducer is a simple object, imported from reducers.ts file:

import { combineReducers, Reducer } from 'redux';
import { AppState } from "./models";
import todoReducer from "../todo-list/todo-list-state-management/reducer";
import loginReducer from "../login/login-state-management/reducer";

// reducers together into a given structure.
export const rootReducer: Reducer<AppState> = combineReducers({
    todo: todoReducer,
    login: loginReducer
});

Recommend Projects