Bundle your action and reducer definitions into change triggers, and give your components quick access to the state through subscriptions 🢂Don’t want to read boring text? You’re in luck! Watch the demo on Youtube: (45 min) https://youtu.be/JvN2Jr9dMSE Time for a somewhat embarrassing truth: I love the simplicity of on a theoretical level, yet somehow production setups of redux often confuse the hell out of me. redux I think the main point which throws me off and makes it hard for me personally to work with redux production code is the huge amount of overhead that is usually required to build and maintain a working redux system. Take the official Redux TodoMVC example: The simple act of adding a todo to the store through a component involves : React 6 separate files Action constant in ADD_TODO constants/ActionTypes.js Action creator function in addTodo() actions/index.js Reducer in reducers/todos.js Root reducer in reducers/index.js Container Component in containers/App.js Actual visual component allowing users to add a todo in components/Header.js ( Take a look at this gist I created highlighting the code used from the files) What’s so frustrating to me about this is that all I want to accomplish are two very simple tasks: Have my visual component call a function with some data that adds the todo item to the store Give that whole process a name — more specifically: Have a ADD_TODO action appear in my redux-devtools so I know what’s going on #1 #2 Design goals of slim-redux-react So to get around these issues, I create & with three specific design goals and redux’s in mind: slim-redux slim-redux-react basic principles Design goal #1: Less boilerplate While reading through the three , I realized that it is possible to re-package how we work with redux, without compromising its original design goals. core principles behind redux reduces boilerplate by letting you bundle action and reducer definitions into (that have optional payload validation). slim-redux change triggers gives your react components quick access to the store through and and lets them modify the state through slim-redux-react subscriptions change triggers. Design goal #2: Faster to code Especially for small state changes the regular redux-react approach takes a long time. I found myself having to setup quite a bit of code to what came down to changing a property in the state or adding an element to an array. and were built in a way that makes defining store interactions and passing them to react components very fast and slim. slim-redux slim-redux-react Design goal #3: Easier to reason about code By bundling actions and reducers into change triggers (that have optional payload validation), everything you need to know about a specific store interaction lives in one file, inside a single API call. When connecting slim-redux to your react components, a single API call lets you provide change triggers and store-subscriptions to your visual components which has a low enough footprint to export your visual- and your container component from the same file (most of the time) Demo A demo says more than a thousand words, so let’s take a look at a counter app built with : slim-redux-react This code is the condensed version of the You can just download it, it and then it :) slim-redux-react counter example . npm install npm start (you can also open up the gist in a new tab , to follow along) Step #1: Create the slim-redux store As with your regular redux code, we first of all need to create a store. Slim-redux is a good sport and happily co-exists next to your already existing redux code — you can pass in and to . your existing root reducer any middleware you already have createSlimReduxStore() More details on how to include slim-redux-react into your existing redux apps in and in the . this recipe API reference for [createSlimReduxStore()](https://github.com/aGuyNamedJonas/slim-redux#createslimreduxstoreinitialstate-existingrootreducer-enhancer) Step #2: Create our counter component (just the presentational part) Nothing fancy in this step — all we’re doing here is to create the counter component. Take a moment to look through the props that the counter component consumes: which is the our counter state props.counter which is a callback to increase the counter props.increaseCounter which is a callback to decrease the counter props.decreaseCounter Step #3: Create the change trigger definitions This is where you encounter the behind slim-redux-react: . first fundamental concept Actions and reducer definitions are bundled together into change triggers Change triggers bundle your action + reducer definitions. Everything you need to know about a specific store interaction in one place. The beauty of change triggers is that you have everything you need to know about a specific store interaction in one place: , the and at a glance. Action type reducer code optional action payload validation Also can you imagine how fast you can add new actions + reducers like that? No more navigating through a thousand files — just add an object to your change trigger definitions and import it wherever you need it. Step #4: Create the container component for the counter In this step we connect our slim-redux store to our Counter component.Notice how small the interface is! Subcriptions: Map part of the state tree 🢂 props are a between part of the . In this case we map the entire state to the .In a more complex state tree you can map a path in the state tree to the prop you want to pass to your component — for example: Subscriptions simple mapping state tree and a prop props.counter subscriptions: { completeTodos: 'state.todos.completed'} using the for optimal performance. Subscriptions are implemented reselect library are also very straight-forward but let me explain quickly what happens in the background: Change triggers When calling slim-redux creates a standard redux store, but injects the slim-redux functionality into it. On initializing the store slim-redux also injects the function into the store (more on that in the ). createSlimReduxStore() store.createChangeTrigger() API reference When working , here’s how you would register and use a change trigger: only in slim-redux When passing in change trigger definitions to ’s function, will be called in the background and the are . slim-redux-react slimReduxReact() store.createChangeTrigger() resulting change trigger functions passed along to your component So in our case, the Counter component gets and as the functions it can call to modify the (counter) state. props.increaseCounter() props.decreaseCounter() Additional resources I realize this post might have been quite the flood of new information so far, so let me close off this introduction by providing you with the resources to learn more about & : slim-redux slim-redux-react 🢂 on github ( ) slim-redux repository npm package Quick Start API reference Examples Motivation Table of contents Recipes: Bundle change trigger definitions in one file Namespace change trigger definitions Use slim-redux in an existing redux setup Use payload validation Build custom middleware to catch payload validation errors 🢂 repository on github ( ) slim-redux-react npm package Quick Start API reference Examples Motivation Table of contents Recipes: Async code & change triggers Simple vs. complex container components Using slim-react-redux in existing react-redux apps Slim-redux recipes Closing words The last two weeks of my life were exclusively dedicated to this project, so I really hope this is helpful to you. If you like these two projects, please be my new favorite human and give them a star on Github! :) Also Dan Abramov, if you’re reading this: I didn’t steal your name “slim-redux”, I promise — I just saw now, after having finished this blog post, that you posted a pretty extensive gist by that name the other day. Sry about that! :) Also I’d love to hear your thoughts, answer your questions and hear about suggestions for future development. So please don’t hesitate to . get in touch on twitter And lastely a shameless plug: I’m preferrably in . Know someone who might be interesting in hiring me? Please get in touch: currently looking for a full-time position as a react developer Berlin jonas.peeck@googlemail.com Thanks! :) is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising & sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Facebook

Twitter

YouTube

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Introducing slim-redux-react — a faster, more concise way of building redux based react apps

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Jonas Peeck

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Introducing slim-redux-react — a faster, more concise way of building redux based react apps

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Jonas Peeck

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES