Manju

Greetings! In this third installment of our simple NgRx series we are going to have a look at selectors. As this is again confusing at first, let's use our simple message string to learn this. For the simplicity, i'm not using any actions in this example. Comple code can is here  https://github.com/slmanju/ngrx-at-slmanju/tree/main/ngrx-hello-selector What we need Store initial value Create reducer to get initial value Register the reducer Create selector(s) Read, change values from the component Generate the Project ng new ngrx-hello-selector --routing=false --style=css cd ngrx-hello-selector/ ng add @ngrx/store@latest ng serve Register the Reducer As in our first article, we will just store a string value in our store. Then register the reducer to read it. If you haven't read it, here is the code. ngrx-hello-selector/src/app/app.reducer.ts const initialState = 'Whatever you are, be a good one.'; const _messageReducer = createReducer( ini...

Greetings! This is our second article on our simple NgRx series. As we saw how to read stored value from the Store, let's see how we can change the value using Actions in this article. Yet again, this will be another simple working example. Full working example https://github.com/slmanju/ngrx-at-slmanju/blob/main/ngrx-hello-action "Red Light, Green Light" ;) What we need Store initial value Define actions to change it Create reducers to react on the action changes Register the reducer Read, change values Generate the Project ng new ngrx-hello-action --routing=false --style=css cd ngrx-hello-action/ ng add @ngrx/store@latest ng serve As this is to demonstrate, we will add Store realted code in a single file. Initial Value In this example, we will store color value and change it. export const initialState: string = 'red'; Create Action Let us create our red and green actions. export const red = createAction('[Color] Red'); export ...

Greetings! When learning Angular, one of the difficulties we face (including myself) is understanding NgRx. In theory, it is so simple. However, difficulty is in implementation. I don't want to add lengthy explanations (documentation has better explanation anyway) but want to add simplest working examples incrementatly so that anyone in any level can understand. As usual, here is the code https://github.com/slmanju/ngrx-at-slmanju/tree/main/ngrx-hello-store Let's create the most simplest store then :). A simple value stored in the store!!! What we need Store with initial value A reducer A component to read the value Yes, no action, no effects as this example is so simple. Generate the Project ng new ngrx-hello-store --routing=false --style=css cd ngrx-hello-store/ ng add @ngrx/store@latest ng serve Initiate the Reducer We will store a simple message in our store. ngrx-hello-store/src/app/hello.reducer.ts import { Action, createReducer } from '@...