 Thank you. That's very kind of you to give me such a warm welcome. It's obviously a real privilege to be an ember meet-up talking about redux. I don't know anything about ember. Jamie said to me, sometimes speakers come who aren't talking about ember and they try and get ember in there somehow. That's not going to happen. I have nothing to give you on that. So instead I'm talking about redux. This talk is called The Art of Reduction. I don't think anything is left in this talk after I reduced all the bits I didn't need that has anything to do with that title. Maybe it should be called just what I learned about redux over the last few months. That might be a better title. So how many people here have heard of redux? And just like be interactive and tell me what redux is. What is it to you? What have you heard from this side of the JavaScript community? Dan Abramovia, very bright guy. Facebook person. Is it a version of flux? It is. So when Facebook created React, they had a system called redux which was about having a one-way data flow. It was a little bit complex. As you mentioned, Dan Abramov created an implementation of redux or something similar of flux called redux. So the two words reducer and flux get mixed together and you get this word redux which is a library and will come on to reducers in a second. This is me. I'm Daniel John Grant on Twitter. I work at a company called Lost My Name. We make magical bed times for children. We empower adults to have special superpowers to make these special magical moments with their kids. I also run a meet-up called London Algorithms. If you're interested in either, this is the Lost My Name website. These are two of the books we make. You can go on there and create a book for a kid in your life. This is the London Algorithms Meetup. I set up this group because I was interested in learning algorithms. I don't know anything about algorithms. I thought maybe I could just invite some other people to teach me about algorithms. If you want to come to that, you're very welcome. We love it to have you. The problem and the reason why we started using redux at Lost My Name functions like this. Update DOM-D-DOM. We're going to go through the DOM. We're going to find an element and we're going to get a value. Now, what's in the DOM at this point in time? It could be anything. Maybe there's another library that's mutating the DOM. Maybe another developer on the team has created another function of their own. They've changed that value. We don't know what that value is going to be. It's something in the bigger context of our application. I can't predict what it is. Then we do something with it. We maybe multiply that value by Dave because you can do that in JavaScript. We'll find another element in the DOM and we'll set its value to a new value. That's a sad face because it's a side effect. We call this function. We don't know quite what the input is going to be going into the function because we didn't provide it. We pulled it out of the DOM and we don't really know what it's going to do either. It's got this side effect. So redux tries to solve that. This is my visualization of functional programming. I'm not going to go very deep into any of these concepts simply because I don't have the ability to. But this is a pure function. A calculator that does one function. So you pass it in an input of four and you call the function and it gives you four times two, which is eight. You can run that function as many times as you want with the same input and it's always going to give you the same output. Which means that this function is very predictable. Predictable is good. So what is redux? If you go onto the redux website you will find this description. It says it's a predictable state container. Predictable is a state container. What might that look like? Well, a container could be this object here and this could represent the state of our web app. We've got some entities, so some users, maybe some products and then there's other bits of state on the web app. Not just the data that we're representing throughout the app. Maybe there's some components. So we have an object of components and maybe our gallery component has got some items and properties for each of those items say it's active or it's highlighted or something like that. So that could be our state object and this is one of the big principles of redux is that it has a global store or a global state object. So one object with everything, every bit of state in your application. The way in redux that we implement interactivity and that the state can advance is with this simple premise that you take the current state and action is applied and what is returned is a new version of the state. We never, ever mutate the state. You always get a new version of the state. So action applied to the existing state will return a new version of the state and that's how we advance the application forward. So I've tried to visualise this and I give full credit to Chris Pearce who did a talk on redux after I'd initially tried to do this talk and I looked at his slides and I thought, it's so much better. So I've copied this visualisation roughly from his slides which I've referenced at the end of these slides and you can look at those if you like. It's very good talk. So here's the cycle in redux. This is redux's version of flux and action is dispatched. So we want to do something. So here's the code. Can you see the code at the bottom there? Or shall I bring it up a bit? Is that a yes or no? It's fine. So we have a store and that's what redux gives us and we'll dispatch an action into the store. So here this action is a type of ad person and it has a value that is lily so we expect that lily is going to get added into our store state. That gets consumed by a reducer. A reducer is a pure function that accepts the current state and an action that's being dispatched at that point in time. So in our reducer here the current state is passed into it and when the reducer is called with that previous action so this one here it will return a new version of the state. Now just notice here that I'm not mutating the state we're using the array spread operator here to create a new array it's got the existing state in there and we're just appending on to that array or concatenating the new value which is lily. Now something needs to happen so we've translated the state we've created a new version of the state and we've created something within our application because the state has changed so we set up subscribers and here we've got a simple method on the store called subscribe and we pass it in a function and my function here I've just called it render app and we'll come back to that in a sec. Then we have selectors and these are really useful and it took me a while to realise the importance of these but if your state object could be likened to a local database it might queries on that database and they're just an efficient way of getting some information out of the state that may not be immediately available from the current structure so rather than forming a state object that's very specific to your implementation you write these queries using selectors so here we want to get the first person in our state array so simple function that returns the first item in that array and then we can use that in the view so when we set up a subscriber it listens to every state change and it calls that render app function and we'll just use a store.getState method here to get a state, we pass it into the selector which is our query into our local state and we'll render it to the app in here I'm just going to render it to the console and that's a great thing about Redux it's not tied to any particular UI framework in fact it doesn't even need to be UI you could use it to turn on your lights in your house or to access the web audio API or anything okay anyone want to ask questions on this? I'm totally happy to be interrupted store is global well it is in this example say if you're using Redux with React we would use the Redux React and bindings and then you're not using it globally so there's different ways to do it but effectively we talk about a global store in Redux in that every area of the application has access to the same state object however you expose that inside of your web application may differ nothing prevents you from having one on one store you always have one store per application so an example where you might have two stores is you have a game where there's a different state on say your server as there is to the client so you might have multiple players so each client maybe has its own store and the server has its own store which knows certain things that each client doesn't know but generally within each application there's just one store so shooting back to this kind of representation of a state we just chuck everything into this object it can be a big object but it's fine they're just references so it's insufficient okay so I'm going to kind of show you how this all works a bit by kind of implementing Redux in a little JS bin honestly this could go wrong and the likelihood of it's going wrong is kind of correlates to the ability of your of the audience to lint on the fly so yeah crowdsource linting beyond your toes here if you want to stop me at any point feel free so the first thing I'm going to write is a function a factory function that's going to create a store for us okay create store and we'll figure out which version of JavaScript we're writing today let's do you like this and the store is going to accept one argument right now which is going to be a reducer and I showed you earlier the reducer it's a way of translating this state ultimately in Redux you end up with one big reducer and for your application which can respond to all the different possible actions but as you learn more about Redux you find a way to compose that reducer so accept to reducer and yeah of course so we're going to create a store so first thing our store needs is a state container so we'll set up our state container that's it there that's the state okay so that's a good question this is the only variable in Redux that will change but here we're not going to change the state we're just going to be switching references to different objects so as we reduce the state we get a new object and we switch the reference to it so when we dispatch an action we want to be able to update this state so we'll have a dispatch method for our store and it accepts an argument which is an action and with that action it's going to take the existing state it's going to apply that action to it and it's going to get a new state and how do we do that we use the reducer here's our reducer we give it a state the existing state which is that global store up there and we apply an action to it and then we're just going to switch out that reference so state now becomes this new state here so we are writing Redux yes I'm writing Redux here it's very simple obviously if I was writing Ember right now this would be a long meetup but Redux is a lot smaller I mean they're not really comparable gosh I wish we had some of the tooling that Ember has for these sorts of projects so the next one we want is just the ability to get the state this is pretty simple it's just going to return that state object for us so we now can retrieve our state from the store and we can dispatch actions into the store which will update the state it's everyone following so far ok and then finally we want to be able to notify listeners when the state changes so we'll just keep a reference to a bunch of listeners up here such an array and we'll create a subscribe method that takes a listener and pushes that listener onto our listeners array so listeners.push and we'll just chuck that listener on there so that's allowed us to have a store of listeners and we want to call each one whenever the state gets updated the state gets updated whenever we dispatch a function so I'll just take the listeners array I will iterate over it and we'll just call each listener one by one like that final thing to do is to return all these methods when we call the factory function so we'll return getState, we'll return dispatch we'll return subscribe is there any more? that's it into each listener no actually that's not I mean you could I suppose but the way Redux works is that you'll probably use the store.getState instead when you do it so let's just see if any of this worked so first thing we want to do is to create our store we'll need to have a reducer ready for it so a reducer has a very simple function signature it takes the current state and it takes an action that's being dispatched and it reduces the state down to a new state immutably so we'll create our application reducer which is a function that takes a state and an action and it returns a state in this case we're just going to pass a state straight through so to see if this has worked at all which I really hope it has because that would be satisfying for me and relieving for you watching we'll subscribe to the store, subscribe to any state changes and we'll just pass in a listening function here and this could be a function that renders your application or does anything here I'm just going to print out the state to the console so we store getState and we'll put it to console let's just put a label here store okay good point thank you this is what I'm talking about you really need it so we need a store create store and we pass in the reducer we do that once I'm going to run this code no errors, it's good and we'll dispatch an action here so we'll give the action a type so we can identify what the action is later I'll just call it add we'll maybe add some items onto an array and a value and I'll just call that please okay and it's returned us as the label state and undefined there's no state defined so that's a good sign so let's see if we can adapt our reducer to do something with that action so we'll say if the action has a type of add we'll create a new state we'll return a new state here we'll return a new array we'll spread over the previous one and we'll pop onto the end of it the value of this action and that should get popped onto an array so run that code again and call dispatch and cannot convert undefined to null or object state is undefined state is here yep this is state should be an array you're right okay what I'm going to do here is we'll pass an initial state this is actually how reducer is implemented I was going to try and do it simply but we'll just keep to the rules and then when we create the store we'll pass an initial state which will just be an empty array yes they do actually and that's what I should have put on here so just to make that we can pass an initial state into our reducer as well absolutely right it's in create store ah yes which goes on to there we go smashing you are a good crowd way better than fail I tell you that okay dispatch state and we have got an item in our array and we can chuck in another one okay so this is redux and from all your interactions there which I really appreciate I can tell that you've understood it which is amazing that in five minutes there we've managed to write redux and to understand what it does and actually if you want to go to github slash reactjs slash redux and look at the source code it's not a lot more complicated than this this is essentially the boilerplate of it how am I doing for time what another five minutes or okay what should we do now like we want go right react okay no let's add another subscriber right react what a joker now I was just like looking earlier to see if there was like any apis that I could use that would provide a different way because I hate doing this thing with react even not in an ember crowd but I think people need to understand that redux isn't a react thing it's great with react but it can be used in other context so let's just find a way of getting the browser to speak the state haven't plugged into the audio here but so we can subscribe to a state change whilst the pushing new values onto this array which is our state so when we subscribe here we can get those values so we'll grab the state you can still get state and that will give us the latest state object and just iterate over those and maybe get the browser to speak each one out one by one so for each item we'll pass into the speech synthesis utterance the item and see if this works okay Daniel guess what name I'm going to do next Daniel Fox okay and we could do the same here with jQuery we could you know put an element on the page we could iterate over our state object and we could print out a list of items and then every time the state updates our render function here is going to update our view in the application which is great now I mentioned at loss my name we decided to use redux I'll just show you an example of why it was so useful I was implementing this little component this is still written in jQuery actually and for a while we just had a couple of options which was the name and the gender of the child in the book and we would create a book based on that and then we introduced languages and then we realised that not everyone was white so we would introduce some different characters so we had these group of characters here and you could select one and if you go back and change the language select here to Spanish we didn't yet have these adventurers available in that language so we had to do this and I thought just do it in jQuery once you do some basic stuff say click on this thing show a a mode or whatever but once you start having conditions in your user interface where say this can't be shown if a certain thing happens it gets really confusing and so you're going back querying the DOM and then updating this and it gets very hard to understand and so Redux is great in that you could push all this state into your state object and then just render it on the page there and that's proved really useful and we're having a lot less bugs now we're doing that sort of stuff going to wrap up so let's just go over what we learnt here you dispatch an action into the store the action is a type and you can pass an extra data as well that is translated using a reducer which is a pure function it creates a new version of the state we have subscribers in our action which respond to state changes normally to render something we can use selectors to query our state and pull data out in a certain way and then we can render our state interview using whatever library we want to use whether it's React or something else this is obviously this slide deck is written in Redux and there's some great Redux dev tools so I can just ping this open here and you can see that as I've been talking we've been moving this application here in the browser through state and it's kind of blurry here but each one of these sections here is an action that was dispatched and when that action was dispatched it updated the state and we've got a new state there and I can actually go back and rewind what's happened while we've been here because of the fact that Redux at its heart uses functional paradigms so when you call a function it's entirely predictable you give it an input and it's the same output so I could go take all these actions actually I can do this I can export them here save them, I could import them in again and then I could relive this very moment that we had to give and I think it was special and I really thank you for that and that's the power and the beauty of Redux that it's predictable in this way currently we're not doing anything with this data but I see a lot of potential to do stuff here so if there's an error I think we should be putting that all up to roll bar and then being able to retrieve it it would make debugging super simple because I could take that state object and I could import it into my local dev environment and boom I've got the browser state right where the user was as it happens we're not getting many errors anymore so benefits of functional programming closing marks okay here, how do you do async okay there are a couple of libraries for handling async so yeah you're right in noticing that a reducer if it's a pure function can't have your side effects so you can't fetch something from outside and you can't update some resource there's a library called Redux Thunk which allows you to do side effects when you dispatch an action and there's a library called Redux Sargas which allows you to do stuff when actions get dispatched and similar ends but yeah that's where I'd start if you want to do that sort of stuff Redux Sargas uses generators which is black magic to me yeah exactly yeah I think that's why it's much loved the subscriber feels like to a naive reducer just a render loop is the subscriber where you would maybe split out the actions and how so if you open up render app at what why would you subscribe more than just the renderer would you have like render nav yeah good question in React you have one subscriber which renders the entire app but if you have a different implementation you might want to have more than one so it's exactly but that is how the data gets through it's obviously crucial it's a very small trivial thing in your day to day development you're right is the debugger also subscribed does it get in and subscribe? no it uses middleware which I won't try and explain but it's possible and those libraries I mentioned Redux Thunk and Redux Sarga both are examples of middleware where you can kind of intercept actions as they come in and do something with it and then just carry on down the cycle so yeah there's some super cool stuff I'll throw a bit of middleware recently which is very simple it just takes the action and then translates those actions into calls to Google Analytics which was nice because it meant we could remove all those analytics calls out of our kind of DOM work so rather than having like candle button click and then having to do like an analytics call in there we could just do it outside somewhere and have like a nice map of translating actions and you would do middleware between action and reducer rather than multiple subscribers yes subscriber is not a big deal your spot on possibly I think if we can't think of an example that you would use in the real world there's no reason why you can't have more than one subscriber it's fine typically you're using one rendering library you're talking about optimisation so this is where selectors can kill you because you pass into your selector of state unless you kind of eruditely point out if the state changes like loads of times which it will in a kind of advanced app that function is going to get called all the time so there's a library called re-select which allows you to memorise that function and only call it when the particular portion of the state that you're interested in has changed so you tend to make those kind of optimisations in that way I think we'll have to leave it there so we can get on to the next talk but if everyone could be of give a thank you