Forem: AVI

A pattern to write clean Redux connected components

AVI — Sat, 14 Sep 2019 02:47:17 +0000

Some components have a lot of side-effect functionality going on. Some of my projects use Redux with redux-saga for all side effect management. I came across a lot of code on Redux web apps where the mapDispatchToProps function looked really huge and weird. Moreover, I've seen a lot of people manually call

  dispatch(someActionCreator);

throughout their components; which is again not a very nice looking thing to do.

I think useSelector and useDispatch are great when your component has only a few selectors and actions used; but otherwise I don't see myself littering the first 20 lines of my React component with useSelectors; and then having to wrap each actionCreator in a dispatch throughout. Here's how I do things:

// makeActionCreatorsToBind.js

import { pick } from 'ramda';

export default ({ actionCreators, keysToPick }) => pick(keysToPick, actionCreators);

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { compose, assoc } from 'ramda';
import { createStructuredSelector } from 'reselect';

import CheckoutPage from 'modules/Checkout/';

import * as checkoutActionCreators from 'modules/Checkout/redux/actions';

import { makeSelectCart } from 'modules/Cart/redux/selectors';

import makeActionCreatorsToBind from './makeActionCreatorsToBind';


function Checkout(props) {
  return (
    <CheckoutPage
      {...props}
    />
  );
}

/* add some other action creators from different modules,
* I'm using Ramda here just so people reading this can
* pick up composition patterns.
*/
const actionCreators = compose(
  assoc('getCreditBalanceRequest', getCreditBalanceRequest),
  assoc('reinitializeCart', reinitializeCart),
))(checkoutActionCreators);


// another way of doing the same thing:
const actionCreatorsMadeWithoutRamda = {
  ...checkoutActionCreators,
  getCreditBalanceRequest,
  reinitializeCart,
};

const actionCreatorsToBind = makeActionCreatorsToBind({
  actionCreators,
  keysToPick: [
    'reinitializeCart',
    'getCreditBalanceRequest',
    'shippingRequest',
    'createOrderRequest',
    'sendOrderDetails',
    'getTotalsRequest',
    'confirmOrderRequest',
    'reinitializeCheckout',
    'applyAddressData',
    'applyCouponCodeRequest',
  ]
});

const mapDispatchToProps = dispatch => bindActionCreators(actionCreatorsToBind, dispatch);

const mapStateToProps = createStructuredSelector({
  cart: makeSelectCart(),
});

export default connect(mapStateToProps, mapDispatchToProps)(Checkout);

I'll explain bits of the code.

bindActionCreators

Redux exposes this function, which basically can take an object with key-value pairs, where the values are action creators; and decorate all the action creators with dispatch, so that you can call the keys, i.e. the names of those action creators as if they're normal functions.

the Ramda bit

assoc => basically a functional way of doing myObject['propertyName'] = someActionCreator

compose => starting from the last function, returns a function that applies all the functions right to left (bottom to top) on the provided argument.

The ramda bit basically creates an object actionCreators that takes an argument (checkoutActionCreators from a file where action creators are described in this case, and there's like many of them), and adds some other action creators from some other files to that object.

The compose function adds keys reinitializeCart and getCreditBalanceRequest with the values of action creators with the same names; imported from some other module.

We then use this new object to call our makeActionCreatorsToBind function and assign the result to a variable named actionCreatorsToBind. This function takes out just the actions that our component needs and returns an object with our specified keys, ignoring the actions we don't need from checkoutActionCreators.

Now we can pass this new object (named actionCreatorsToBind) to bindActionCreators and voila, everything looks neat and works well.

Use the React Context API; without nested render prop fatigue.

AVI — Fri, 08 Mar 2019 17:15:52 +0000

EDIT: with React Hooks, you can just use useContext to do this with no pain, this article is rendered of little value now, so is the library. I haven't found myself needing this at all.

A Little Context (lol)

Redux has been my home, will be my home for a lot of use cases. It's made life easy as a developer who's always had to single handedly manage projects of scale. But here's a myriad of use cases where you don't need Redux's magic or functionality. Sometimes you just need central state without prop drilling. I gave job interviews in the last year that required small take-home projects and I realised just how powerful the Context API can be when you don't need Redux/MobX et al. Only issue, Redux let me put everything in one place and elegantly select what I needed from it. With Consumers, I got stuck in situations where there were render props inside render props inside...you get the drift. If you're into functional programming, first thought in your mind is if only I could compose these. Let's look at some mildly problematic code to understand this.

import React, { Fragment } from "react";
import { render } from "react-dom";
import { __, map, prop } from "ramda";

import Drawer from 'drawer-component-from-wherever';
import List from 'list-component-from-wherever';
import Title from 'title-component-from-wherever';


/*
    Note: the following is not the "right" way to initialise context values, you're
    supposed to use a Provider and pass a value prop to it. If the Consumer finds
    no matching parent Provider, only then it uses the arguments passed to
    createContext as the initial value. This is a hypothetical example,
    hence the shortcuts.
*/

const PoseContext = React.createContext('closed'); // is the drawer open or closed?
const CartContext = React.createContext([{
  ids: idsFromSomewhere,
  cartMap: objectFromSomewhereElse,
}]);

const App = () => (
  <PoseContext.Consumer>
    {pose => (
      <Drawer pose={pose}>
        <Title pose={pose}>Your Cart</Title>
        <CartContext.Consumer>
          {({ ids, cartMap }) => <List data={map(prop(__, cartMap), ids)} /> }
        </CartContext.Consumer>
      </Drawer>
    )}
  </PoseContext.Consumer>
);

render(<App />, document.getElementById('appRoot'));

Well, that doesn't look very ugly now. But imagine if instead of using ramda and offloading to another component, we had something like this in the CartContext's Consumer:

<CartContext.Consumer>
  {({ ids, cartMap }) => (
    <Fragment>
      {ids.map((id) => {
        const product = cartMap[id];
        return (
          <CartItem onClick={clickHandler} key={id}>
            <Link route={`/products/${product.slug}/p/${product.id}`}>
              <a>{product.name}</a>
            </Link>
          </CartItem>
        );
      })}
    </Fragment>
  )}
</CartContext.Consumer>;

Now imagine this, but with another Consumer called CouponConsumer to inject the app's Coupon related state. I would be terrified to look at Cart.js even if the culprit was me from 2 months ago. Enough banter, let's now be true to the title of this post and propose a solution to make neat code.

Adopting react-adopt (ok sorry no more)

The tiny library that saves the day.

pedronauck / react-adopt

😎 Compose render props components like a pro

😎 React Adopt - Compose render props components like a pro

📜 Table of content

🧐 Why

Render Props are the new hype of React's ecosystem, that's a fact. So, when you need to use more than one render props component together, this can be boring and generate something called a "render props callback hell", like this:

💡 Solution

Small. 0.7kb minified!
Extremely Simple. Just a method!

React Adopt is a simple method that composes multiple render prop components, combining each prop result from your mapper.

📟 Demos

💻 Usage

Install as project dependency:

$ yarn add react-adopt

Now you can use…

View on GitHub

import { adopt } from 'react-adopt';

const CombinedContext = adopt({
  pose: <PoseContext.Consumer />,
  cart: <CartContext.Consumer />,
});

const App = () => (
  <CombinedContext>
    {({ pose, cart: { ids, cartMap } }) => (
      <Drawer pose={pose}>
        <Title pose={pose}>Your Cart</Title>
        <List data={map(prop(__, cartMap), ids)} />
      </Drawer>
    )}
  </CombinedContext>
);

Neat, isn't it? We were able to compose two render prop components into a single one, and we could do the same thing with three or four. While Context Consumers are a great demo for this, we can utilise this neat trick for all render prop components and make our code more understandable and organised.

I'm trying to make it a habit to write every week, follow me if you think you want more of these tiny tricks that I picked up along my front end journey.