Free AI web copilot to create summaries, insights and extended knowledge, download it at here

Abstract

lot of Blockchain DApp development, so Figure 1 is an example of a function in <b>interactions.js</b> loading a player from a game I’m creating.</p><figure id="e2d4"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*VElNNn2bPva1M5AuyaViVQ.png"><figcaption>Figure 1: Snippet of interactions.js</figcaption></figure><p id="587c">The only external dependency here is <code>playerDetailsLoaded</code> from <b>actions.js</b>.</p><p id="111a"><code>tennisPlayer</code> is a Smart Contract instance on the Blockchain. It stores a list of players and exposes a public <code>players</code> array, which is called with the <code>id</code> to retrieve a single player.</p><p id="2540">Figure 2 shows how it gets called from the component.</p><figure id="a760"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*RB9ZPtL1L3rN_I0karCnpw.png"><figcaption>Figure 2</figcaption></figure><h2 id="f491">Actions</h2><p id="4b34">Actions are what the dispatcher uses to interact with the reducers. Your <b>actions.js</b> file will end up looking like Figure 3 after a while.</p><figure id="0bbc"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*mln41jgb_rR3WZb2xdVqrg.png"><figcaption>Figure 3: actions.js</figcaption></figure><p id="71cb">Line 55 shows the <code>playerDetailsLoaded</code>function called from the dispatcher in <b>interactions.js</b>.</p><p id="f5ed">This file will get large pretty quickly, so it’s wise to turn <b>actions.js</b> into an actions directory and separate the actions logically. More on that later.</p><h2 id="6f75">Reducers</h2><p id="4c70">Reducers are what alter data in the redux store. If you’ve used Redux before, you’ll know what these look like. Figure 4 shows an example of our <code>PLAYER_DETAILS_SELECTED</code> reducer on line 22.</p><figure id="1d5c"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*nLAJ44jfjTrEVKLXVKM_TQ.png"><figcaption>Figure 4: reducers.js</figcaption></figure><h2 id="7977">Selectors</h2><p id="832b">Selectors are what the components use to access the data in the redux store. I use a combination of <a href="https://lodash.c

Options

om/">lodash</a> and <a href="https://github.com/reduxjs/reselect">reselect</a> in <b>selectors.js</b>. Figure 5 shows a snippet from <b>selectors.js</b> with the select used to get <code>selectedPlayerDetails</code> from the redux store.</p><figure id="4646"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*mAJ_rC0MDzXJJvkviaEi6w.png"><figcaption>Figure 5: selectors.js</figcaption></figure><p id="cd7b">Figure 6 shows how to call it from the component.</p><figure id="04f2"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*SZ0LFMgs1BklT5cC5zVrwQ.png"><figcaption>Figure 6: Selecting the playerDetails in Component</figcaption></figure><p id="320c">And there we have it! From component to interaction, to action, to reducer, to selector and back to the component.</p><p id="e69d">The great thing about this pattern is that each component need only know about a few interactions and a few selectors, keeping component code clean.</p><h1 id="2f20">Growing</h1><p id="9b3b">Start with a <b>redux/</b> folder with the following files:</p><ul><li>interactions.js</li><li>actions.js</li><li>reducers.js</li><li>selectors.js</li></ul><p id="f19b">As the application grows, and when you feel the files growing too large (perhaps past a few hundred lines each), restructure your redux folder to have a folder for each one. Inside each folder, separate the code into logical files.</p><p id="3ae1" type="7">“EEEARRRRGHS”</p><h1 id="25ac">Further Reading</h1><div id="1892" class="link-block"> <a href="https://readmedium.com/blockchain-development-resources-b44b752f3248"> <div> <div> <h2>Blockchain Development Resources To Follow Right Now</h2> <div><h3>A list of resources to learn Blockchain, Ethereum, and DApp development</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*GZlVe27SOc44fcIYztY5Qw.jpeg)"></div> </div> </div> </a> </div></article></body>

How To Structure React Redux Applications

Keep your code in check

Tech debt can build up quickly when building out an application from scratch. Frameworks like React and Redux provide great patterns to modularly structure code.

And we live in a perfect world, so that’s all we’ll ever need!

Except we don’t, and it isn’t.

When using React and Redux, I always reach a point when I take a step back and think “Wow, when did this get so messy?”. This prompts a reshuffle, and after resolving all the Line x:y: ‘somethingImportant’ is not defined no-undef errors I’m finally satisfied.

Until, of course, it happens again, several weeks later.

Code like this needs constant care. It needs love and affection. Tame the beast whilst making it stronger. Structuring unruly code requires an overarching strategy.

For React & Redux, I use what I like to call IARS. Pronounced “EEEARRRRGHS”.

“EEEARRRRGHS ME HEARTY”

IARS

Say it how you like, IARS stands for Interactions, Actions, Reducers, Selectors.

Here’s a breakdown.

Interactions

This is where the grunt work is done, triggered by user activity. Saving something new? Put the functionality in here and export it so the front end component can access it.

Anything being changed in your application should be kicked off from here. Dispatch actions from interactions.js.

Example: I do a lot of Blockchain DApp development, so Figure 1 is an example of a function in interactions.js loading a player from a game I’m creating.

The only external dependency here is playerDetailsLoaded from actions.js.

tennisPlayer is a Smart Contract instance on the Blockchain. It stores a list of players and exposes a public players array, which is called with the id to retrieve a single player.

Figure 2 shows how it gets called from the component.

Actions

Actions are what the dispatcher uses to interact with the reducers. Your actions.js file will end up looking like Figure 3 after a while.

Line 55 shows the playerDetailsLoadedfunction called from the dispatcher in interactions.js.

This file will get large pretty quickly, so it’s wise to turn actions.js into an actions directory and separate the actions logically. More on that later.

Reducers

Reducers are what alter data in the redux store. If you’ve used Redux before, you’ll know what these look like. Figure 4 shows an example of our PLAYER_DETAILS_SELECTED reducer on line 22.

Selectors

Selectors are what the components use to access the data in the redux store. I use a combination of lodash and reselect in selectors.js. Figure 5 shows a snippet from selectors.js with the select used to get selectedPlayerDetails from the redux store.

Figure 6 shows how to call it from the component.

Figure 6: Selecting the playerDetails in Component

And there we have it! From component to interaction, to action, to reducer, to selector and back to the component.

The great thing about this pattern is that each component need only know about a few interactions and a few selectors, keeping component code clean.

Growing

Start with a redux/ folder with the following files:

interactions.js
actions.js
reducers.js
selectors.js

As the application grows, and when you feel the files growing too large (perhaps past a few hundred lines each), restructure your redux folder to have a folder for each one. Inside each folder, separate the code into logical files.

“EEEARRRRGHS”