Redux and Vanilla JS

Redux is a rather famous part of the React ecosystem, but it doesn't have to be. All of the logic arguments for Redux stand on their own apart from the rendering engine you pair with it. In the past, I've emulated Redux-like data stores in Angular 1.x apps, and hand rolled solutions. They do one thing, and they do it really well, manage state. There's always arguments for spawning multiple Redux stores of the best I've heard was one store per API consumed as a cache. But no matter how you end up potentially using state based stores, their purpose remains applicable in almost any application. Redux moves the source of truth off the canvas it is meant to manipulate.

I've done some light experimentation for a project I may end up scrapping, but wanted to share the results just the same. It was entertaining, and it's awesome to know you can get all the power you need from Redux, without fancy tooling or even a build process. A few pieces that should be of keen interest to you if you're new to Redux:

  • settings.initialControlState vs defaultControlsState when creating the store.
    This is how you get program specific defaults, overridden by item settings on startup.
  • The various Redux.combineReducers object keys that map to the functions that reduce them.
    Managing your entire app's reducers through a single function is mind boggling.
  • store.subscribe(render); followed immediately by render();.
    Redux is not RxJS. You could setup a store object property as a stream, but it's not native. You need to fire that initial paint yourself most of the time.
  • handleUpdateFilters vs handleApplyFilters.
    You must think of every change to the state firing an action, even if the user sees only the results of the application of those previous actions.
  • The fanatical use of Object.assign({}, state, {key: value});.
    Never alter the state object directly.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.