In the last section we spent a little bit of time to just look at the new application.
We're going to build and generate a new Riak native project in this section we're going to spend some
time learning more about redux.
And when I say read I mean just read up.
We're not going to talk about Riak native.
We're not going to talk about react or focusing solely on redux.
That's all so because we're only focusing on redux but we still want to write some code.
We're going to be using a really interesting little tool to just kind of experiment with some redux
code and open up my web browser and then navigate to Steven Grider.
That's my name dot get hub dot bio slash J.S. playgrounds.
Make sure that J S and T are all capitalized in here as well.
And let's go there and see nice screen pop up here on the left hand side I can enter in some amount
of javascript.
Sounds like Konst pie 0.24.
And then if I print out any vier any variable that can be printed out it will be automatically displayed
on the left hand side or is on the right hand side.
So if I display pi or two times pi I get three point one four in six point 2:8 I can put any type of
javascript in here.
And let's say I'll do some stream concatenation.
So any type of javascript plus PI yields statement any type of javascript three point for.
And what's really interesting about this tool is I can change any value I want on the fly and I automatically
see the result pre-calculate on the right as well.
Lastly if I make any typo in here so I'm going to make a little typo like so I'll get a note on the
bottom right hand side that says hey you made a little bit mistake right here.
Go and fix it.
So again we're just using this tool to get some very live very dynamic feedback on the redux could that
were you me writing here.
Oh get.
So we're using this tool to learn about redux.
This tool is not required for the docs.
It's just a place where we can mess around a little bit.
So let's change gears here now and talk a little bit more about redux.
This is a diagram of exactly how redux works.
And you know you don't really have any context on what's going on here at all.
Let me lead this off by saying right now crystal clear plain as day redux has a lot of fancy terminology
but it is all language that obscures or obstructs otherwise straightforward concepts.
So I don't know.
I don't know about you but I've heard just tons and tons of people say when they talk about redux they
say oh redux is so simple it's amazingly simple.
Well yeah of course it's simple when you understand the confusing terminology.
And so that's our goal.
We want to master the confusing terminology and put plain English definitions to all the different parts
of the library.
So with that in mind I have four words on the screen right now.
Store action reduce certain state forwards.
I want to put a plain English definition to each of these words right here.
So here's my plain English definition for each of these words.
And we're going to be repeating these definitions over and over and over through the next couple of
sections.
Now I know that you can you know read from the screen here but I'm going to walk through the definitions
anyways because I need something to say when I'm recording a video.
Let's start off first with this one in the middle.
Very center.
The reducer.
This is probably the best example in redux of something with a name that is just too complicated.
Just way too complicated.
So here's my plain-English definition.
A producer is a function that produces some amount of data.
That's it.
That's all that's all it is.
It is a function that produces some amount of data.
Next an action an action is a plain javascript object and I say plain javascript object I'm talking
about like you know curly braces like an object.
That's it.
It is a plain javascript object that tells the reducer how to modify its data get the action only has
one requirement.
It must have a type property.
We're going to discuss more about that in a minute.
Again I'm just trying to get these words in your head right now just the very vague general concepts
in your head.
Next on the far right hand state state is our applications data.
Everything from the value of each input field to knowing whether or not there is a user currently authenticated
to a list of data to a series of pictures to show me out all of the data inside of our application puts
together our state.
So it's just the data that our application is using.
Finally the store the story is what holds the reducers in the application state.
And when I say holds I mean like just literally it has a reference to the reducer in the state if redux
was its own like kind of like a standalone object or you know its library that you want to import and
use it would be most most closely analogous to the store right here.
So you can kind of think of when I say redux when I say like OK redux has some data for us or redux
we want to update the data that's sitting inside of redox I'm referring to the store.
So just keep that in mind.
All right.
So let's see a little bit of a example of all of these terminologies in practice.
So this is all the same terminology.
So here's an action or douceur state.
Here's a store and let's walk through this example here.
As I've written it out using redux we are going to we're going to use redux to make a tiny application
which will take a string of characters basically a word and split it into an array.
OK.
So that's our that's our goal.
I want to use redox.
It will take a string of characters and split it into an array of characters to do so we will first
start off with an action.
The action is going to be plain javascript object that says here's a list of string of characters like
a word.
I want it to be split up.
So it's contains two things.
The action contains two things a stream of characters and a direction like a command an instruction
that says I want this thing to be split up into characters.
We're going to take that action and pass it into the reducer.
The action when it goes into the reduce or the reducer will look at the action and it will say aha this
action is commanding me to split up these characters and wants me to split up all these characters into
an array of single characters.
So it's going to take the actions string of characters you like the word.
And it's going to split it into a list of characters.
The reducers will then return that list of characters like that array because the producer returned
that array of characters like that data.
Our state is now going to consist of an array of characters like this.
SDF.
So again this is just like one very simple one very straightforward process.
So we created we are going to create an action that has some strange characters like SDF and it's going
to contain some commander some instruction that I want this thing to be split into a list of characters.
We're going to pass that to the seducer.
The producer is going to take the string of characters and ask him to split them into an array and the
reducer is going to pass that array to our application state.
And so now we would say that our application state consists of an array of characters like so.
So this is I know very esoteric right now probably thing is you what the heck is going on.
What's with this splitting stuff.
What's with this array.
What are you talking about guy.
I don't blame you I don't blame you but this is like you know a very practical example that we are going
to take right here and we're going to code this up exactly and JSE playgrounds.
Going to see what the action looks like we're going to see what the reducer look like looks like.
And we're going to get some experience with the state object as well.
So let's take a short break and then come back and code up this tiny little application inside of our
browser.