Using Redux to Make a Dead Simple React Store
Redux has a lot of benefits. Your application’s state is stored in a single location. That state can’t be mutated directly, only by whatever a reducer returns. Reducers themselves are pure and deterministic functions. Application state becomes much easier to predict and test.
However, as a React developer using Redux, you’re opting into a whole new and somewhat rigid paradigm. Action creators are typically defined in another JavaScript file outside of the React app. Action types may be defined in another file too. Reducers are typically spread across multiple files in another folder. And it’s common to use a helper library such as react-redux to bring React and Redux together. But even that helper library consists of a fair amount of work for setup and for whenever you use it to import action creators or pieces of state into a component.
Modularity is a good thing. But it can also make it difficult to reason about your code when you send data to some imported function that returns data to a library that passes data to another function in another file that returns data to the library whose result is imported back into a component; all for a single state update.
Dan Abramov, one of Redux’s creators, made a post dispelling the idea that managing state Redux’s way is an end all be all solution to every application, and the top highlighted passage of that article is “Local state is fine.” A lot of the common patterns used with Redux aren’t even required nor necessarily encouraged by the creators.
And because we don’t have to use Redux in any particular way, we can build on top of it to create an easier-to-use central store that maintains a lot of Redux’s benefits.
That’s what React Lot is. A dead simple React store that uses Redux under the hood. It can easily be updated and accessed from any React component. It never directly mutates application state and always returns a fresh state on updates. Another perk of using Redux is that the Redux Dev Tools browser extension can be used to take advantage of time travel debugging.
There’s only two methods to know.
lot.set({ username: didrio });
lot.get('username');Because it looks as if the state is being updated directly, although it’s not, it can be easier to reason about managing state this way rather than calling action creators. That’s not to say emitting actions isn’t a great way of handling and thinking about state changes, because it is. But for applications where using that model effectively can be too much effort to construct, especially when prototyping ideas quickly, the simplest get and set methods that can be used across any React component is a nice alternative.
As a note, while you can’t set your own action creator types, the type given to every Redux action is the name of the key that was created or modified. That makes it easy to see what was changed in the Redux Dev Tools extension.
Check out React Lot’s Github repo to see the simple set up process: https://github.com/didrio/react-lot
