I have been using Facebook’s React since v0.9.x in Feb 2014. I am a defector from Backbone.js which initially started after replacing our view layer with React. After understanding the benefits of Flux and it’s unidirectional flow architecture it became pretty evident that I did not need Backbone.js models and collections anymore. I will assume you have some basic knowledge of Flux, Redux, React, and functional programming. I will cover as much as I can in this article.
Tag Archives: Redux
Redux CRUD is a convention driven way of building CRUD applications using Redux. After building several Flux applications we found that we always end up creating the same action types, actions and reducers for all our resources.
Redux CRUD gives you an standard set of:
- action types: e.g.
- actions: e.g.
- reducers: for the action types above e.g.
Redux CRUD uses seamless-immutable for storing data.
In his blog post Two Reasons Functional Programming Is Slow in SpiderMonkey, Shu-yu Guo breaks down some of the issues SpiderMonkey has when optimizing functional style programs. Since I am working on this very issue as a Mozilla intern, I am going to try to give an updated account of what SpiderMonkey does wrong and some of the initial fixes I am working on.
[This article assumes a high level understanding of GraphQL, which has already been written about by Rising Stack and @clayallsopp. This article will start with the backend that we want and then convert it into GraphQL, covering sync/async and query/mutation actions.]
Building off of the basic Pokedex app from my Redux post last week, let’s write a backend API in GraphQL that could support our Pokedex. We’ll need two query methods (to fetch the list of Pokemon and the user’s caught Pokemon) and two mutation methods (to create the user and catch a Pokemon).
The list of Pokemon will be stored in-memory and the list of users and their Pokemon will be stored in MongoDB.
I’ve been a bit heads down for the last two months, working on a project with React 0.12.2 and Reflux. In that course of time, the React ecosystem has begun to feel foreign to me. React is up to 0.14 beta, React-Router is up to 1.0 beta, a few ES6 and ES7 patterns have been popularized, and Redux has gained a large amount of support and momentum and arguably emerged as the Flux library of choice.
I’ve been wanting to look at Redux for a while, but the only way I can motivate myself to learn stuff like this is by doing write ups. So let’s build a simple Pokedex app that displays a list of Pokemon, has an search input field, and lets you click a button to catch some Pokemon. That’s it, intentionally contrived. Everything will be synchronous for now, but I’d ambitiously like to do writeups in the future that introduce the capabilities/usage of Redux Dev Tools, ImmutableJS, GraphQL, and server-side rendering.
[This article is being written specifically for those who have prior experience with React and Flux, but have not had any prior experience with Redux.]
In our previous snippet, we looked at typed table view controllers. This snippet tries to achieve the exact same thing, but with more code. When preparing the previous snippet, we started with a working code base. However, just before publishing, we realized that we wanted to try to make things simpler. After a lot of refactoring the code still compiled fine, but unfortunately, the previous snippet will crash at runtime. This snippet achieves the same thing, but with more code, and without a crash. Let’s get started.