Conversational sign-up form UI with React and Redux
Sep 8, 2016
With conversational UIs becoming more widely used on the web, I thought it might be interesting to emulate Ashley Baxter’s new insurance product’s quoting experience and build it using React and Redux.
To give us an idea of what we’re building, check out the working demo
Or if you just want to go through the full source code for this tutorial, please check out the GitHub repo for the demo.
I’m not going to go into much, if any, detail on what React or Redux are, but will assume you have a basic knowledge of both.
I’m going to avoid going over any styling, and I’ve removed any CSS classes from the code snippets to keep them as concise as possible. I’m also avoiding going line-by-line, explaining what each line of code does, but more give you a high-level overview of how to architect this kind of UI.
The full source code is on GitHub, so I would recommend delving into it on there!
We want to eventually send off the values that the user enters to the server, but we don’t necessarily have to store this data in a serialised fashion. We can store it in a way that’s easiest to filter, manipulate and parse.
Something like this:
ie. have they saved the form yet, how many fields have they completed and the fields themselves.
This data structure becomes the initial data structure for our Conversation reducer:
We then create our boilerplate Redux reducer like so.
We have our data, now we need some actions to manipulate it. For that, we need to think about what we want to do to it. We’re going to want to save the user’s input, progress the user’s journey through the conversation, to maybe let them start over and then finally to let the user save their progress/complete the conversation.
Now we have our action types, we can define the simpler ones in an action file: