This is the fourth part in a series on Redux, a state Management Framework used with single page application frameworks such as React and Angular. This series looks at using Redux without another framework. Please read part 1, Part 2. and Part 3 before reading this.

In a real-world app, I'd probably create the state as its own class, and pass a new instance of the state into the method as the default argument. Such details are left out in this proof of principle sample.

This is the third part in a series on Redux, a state Management Framework used with single page application frameworks such as React and Angular. This article series looks at using Redux without another framework. Please read part 1, and Part 2 before reading this.

This article will expand on the previous "hello world" sample to teach you how to say Goodbye.

Add a new state to the Reducer

With every hello comes a goodbye. We are going to create a button that will say goodbye to the user, and then clear out the helloUser value from the store. The purpose of this sample is to add more objects in the store.

It is just another case statement in the switch. We set a new value on the state to goodbyeUser, and set the helloUser value to an empty string. When we set the default, near the beginning of the reducer() method, be sure to initialize the goodbyeUser state property:

This just uses getElementByID() to get the span for the goodbyeValue. It sets the innerHTML to the stores goodbyeUser property. Make sure you subscribe:
store.subscribe(renderGoodbye)

The code should be runnable now:

Enter your name and you'll "Hello Jeffry", just as with our original sample. Then click the GoodBye button, and you'll see the name populate after Goodbye and the name after Hello blank out. I did not add code to blank out the user input, but you should be able to do that easily if needed.

Redux is a state Management Framework that is primarily used with React, but can also be used with Angular. This article series looks at using Redux without another framework. Please read part 1 before reading this.

Instead of using NodeJS and Build Script tools, I'm just pulling it out from an Internet based CDN because it is the simplest way. Create the reducer:

<script> function reducer(state, action) {}</script>

The reducer is the function that will run when actions are dispatched to the store. It takes in the current state and the action, then runs code to determine what the new state will be. A reducer should not have any side effects. That means it should not modify the existing state. The first step is to make a copy of the existing state:

var newState = Object.assign({}, state)

On first run of the application, no existing state will be defined, so we'll check for that and set some defaults:

if (typeof state === 'undefined') { newState = { helloUser : ''}}

The state of the application is just a JavaScript object. I included one property on that object, helloUser and defaulted it to an empty string. Once we start dispatching events, we'll revisit this function to handle those event types. Until then, just return the new state:

return newState;

That completes the reducer, for the moment.

Now, create the store:

var store = Redux.createStore(reducer);

This calls the createStore() value on the Redux library. The reducer() function is passed in. Notice we are saving the store as a local variable for future reference. Do not put this line of code inside the reduce.

The renderHello() function accepts no arguments. It uses the JavaScript document object and getElementByID() function to retrieve the helloValue span. Then it populates it with the helloUser string in the state. We retrieve the state from the store using the getState() functionality. Be sure to call the renderHello() function immediately to render the function in the default state:

renderHello()

Whenever the state changes, we want to run this renderHello() function. We do that with the subscribe() function on the Redux store:

store.subscribe(renderHello)

Now, when the state changes, the renderHello() function will be called, thus causing the UI to update.

Whenever the username input is modified, we want to dispatch an action to the store so that the reducer() function runs, which will return the modified state, and then run the renderHello() listener to modify the UI. This is the code:

Without a framework, such as Angular, it is a bit complex to listen for events on elements, but we grab the username input with getElementByID() and then listen for the keyup event. We use store.dispatch() to send a NAME_MODIFIED action. By convention, the type of the action is a constant put in all caps, but here we are hard coding it a bit.

We need to modify the reducer() function to handle the NAME_MODIFIED action:

This code is after the undefined check, and before the return statement. It is a switch statement that checks for the action's type, and does actions based on that. At this stage in the application, we only have a single event, but we'll add one more as we iterate over this code.

Redux is a state Management Framework that is primarily used with React. There is an Angular port of it, ngrx. I wanted to learn a bit about Redux and write about it in the latest Bonus book for my Angular 6 series.

This is the first in a series of articles about Vanilla Redux. In this article we'll talk a bit about terminology used for Redux and how a Redux application should flow.

Understanding Redux Terminology

Many frameworks have their own terminology, so this section will explain some common terminology.

Actions: Actions are a collection of data that you send to the Store. The object must have a type value to define the type of action. The action in Redux is similar to the EventEmitter you've probably used in your Angular applications, and are passed to the store using a dispatch() function.

Action Creators: Action Creators are functions that return an action. Action Creators do not dispatch the action, only return it. It is a way to encapsulate your functionality for creating an action.

Reducers: Reducers are a function that update the state of the application. It accepts the current state, and the action you are performing. Reducers should be pure functions, meaning they do not have any side-affects such as changing the arguments or calling non-pure functions. The reducer does not change the current state of the application because that would be a side effect. It only creates, and returns, a new state object.

State: The state is an object that stores data for your application, such as items in a shopping cart, the user who logged in, or other information.

Store: The store is a single object that holds all the application state. It can return the state using a getState() function. It registers or unregisters listeners using a subscribe() function. And it updates state via dispatch() function.

As we progress through this series, we'll cover each item in more detail.

Understanding Redux Flow

Redux has a unidirectional data flow. That means that data always flows in one direction throughout the app. I put together a diagram:
Let's look at each box:

Start in the top middle. You have a view which is waiting for action. This could be a user entering data or clicking a button. Technically this doesn't even have to be a view but could be any code in your app, such as the result handler of a remote service call.

When an action occurs, the view will call the dispatch() method on the store and send in the action object.

The store will, in turn, call the reducer() function. The current state and the new state are passed in as arguments. The reducer function will do some magic and return the app's new state.

The store saves the new state.

Then the store calls any listener functions. At some point your code must have called store.subscribe() so it could get notified when something changed.

The listener functions run code and update the view. If they need access to the current state they can call the getState() method on the store.

The process is simple to understand. With a shared vocabulary, we're ready to tackle some code and the next article in this series will create the first Vanilla JavaScript Redux sample.

I have a lot more trouble answering Angular questions on StackOverflow than I did answering Flex questions. The bulk of Angular problems seem to come from integrating different systems and libraries together. But, every once in a while I see a question that I seem to be the perfect person to answer. This question is about Sending JSON from Angular to PHP. I wrote a book about that.

When sending JSON to PHP--or Java or ColdFusion or any server side tech--you need to be sure to set the headers to application/json.

We create an instance of a RequestOptions object, and add the Headers onto it. The RequestOptions object is sent as part of your server request, in this case using a post() method. This is all part of the now deprecated Http library.

I just discovered Augary, a Chrome Plugin for debugging angular applications. I can't believe I never came across this before.

Install Augary and then an Augary tab will appear as part of the Chrome Debugger tools. Here it is for the Learn With application:

Instead of trying to unravel the application through compiled source files and some guesses, Augaray models out the application for you and allows you drill into services, components, and routes to give you a deeper understanding of what is going on in your Angular application.

If you haven't done so already, you may want to read last week's post about generating an Angular 6 project to use SASS instead of regular CSS files.
There is a ton of documentation out there on how to do this for Angular 5 or before and they direct you to use ng set to modify the Angular config file. None of that works for Angular 6, because the

get/set have been deprecated in favor of the config command.

I had two problems. First, I found the documentation on how to use the config command a bit lacking. Second, you already have to know the properties you want to change before you can use the command.

Create a new project that is set to use SCSS and you'll find something like this:

You won't get a command line response, but your angular.json will not be updated.

If you want to CSS files that were already modified, you'll have to change them on your file system--and any code that references them such as a @component metadata. Be sure to open up the angular.json file and change the other defaults:

I've been doing some architecture work on a new project, and setting up the project infrastructure using Angular 6 CLI. Without thinking I created a project normally.

ng new foo

You'll see something like this:

Notice that the CSS Files generated have the CSS extension. That's not what I wanted, SASS files have the scss extension. To tell Angular CLI how to create a project using SCSS files, you need to specify the style command like attribute:

ng new bar --style=scss

Now look:

The files are properly updated. Next week, I'll show you how to update a project that was already generated to make it use SCSS by default.

Can you use an underscore in a domain name?
The short answer is no.
The longer is maybe, but don't do it.

I'm working on a project, and I'm the first Windows user on the team. They set up there local dev domains to point to sites:

site.com_local

I set it up using a hosts file on my Windows unit. I was able to ping that domain without issues and was able to telnet to the port. But, the web browsers wouldn't load the URL. This was confusing.

I resolved all the site load issues by changing the URL from

site.com_local

to

site.com.local

.

To make things extra odd, I can't replicate this on my own personal machine. Sites with URLs seem to load perfectly, so I'm wondering if the issue is with Tomcat--not Apache Web Server--or Docker which I'm not using on my own machine.

There is a great write up on this here. The general gist is don't use the underscore in URLs host names, or Fully Qualfiied Domain Names, but they might be okay in other types of DNS lookups.