You can make redux complicated but at the most fundamental level, you have a view layer that lets you fire actions that can update the state. There is middleware and actions hit reducers which update the store, but let’s consider those implementation details. Practically speaking, it’s a tiny action loop where View > Action > State.

Redux observable introduces a separate action loop that runs alongside the tiny loop. The view layer lets you fire actions that trigger epics, which can fire off more actions, that can update the state. So it’s View > Action > Epic > Action > State.

This diagram helped me put all this all together.

A few important details:

1. All actions will run through the tiny loop before they run through the epic loop.
2. All Epics must return an action or it’s doom.
3. If your epic returns the same action it received, you will create an infinite loop of doom.
4. If your...

Redux doesn’t handle async work too well. Thunk is the go-to solution, but it’s not always great for testing.

Here is how to do a basic async data fetch with redux observable;

export const exampleEpic = (action$, state$, { later }) =>
  action$.pipe(
    ofType('projects/updateTitle'),
    debounceTime(1000),
    switchMap(({ payload }) =>
      from(later(2000, payload)).pipe(
        map(res => ({
          type: 'projects/fetchFulfilled',
          payload: res,
        }))
      )
    )
  );

Thunks are called epics in redux observable. All epics take three parameters (action$, state$, { dependancies }). The last two are optional.

The action$ parameter is a stream of all redux actions emitted over time. state$ is the state of your redux store. dependencies can contain any side effects that you want to use in your epic. Passing in side effects as dependencies is super handy...

If you are adding redux observable to a new redux project, the first step is to install it along with RXJS

npm i redux-observable rxjs

The next step is to set up the middleware.

Create a middleware and pass it to the createStore function from Redux. Then you create a root epic that combines all your epics and call epicMiddleware.run() with the rootEpic.

import { createStore, compose, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { combineEpics } from 'redux-observable';
import  { epicA } from './epicA';
import  { epicB } from './epicB';

export const rootEpic = combineEpics(
  epicA,
  epicB
);

const epicMiddleware = createEpicMiddleware();

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default function configureStore() {
  const store = createStore(
    rootReducer,
    composeEnhancers(

pragma solidity ^0.4.24
contract Campaign {

    address public owner;
    uint public deadline;
    uint public goal;
    uint public fundsRaised;
    bool public refundsSent;

    event LogContribution(address sender, uint amount);
    event LogRefundsSent(address funder, uint amount);
    event LogWithdrawal(address beneficiary, uint amount);

    struct FunderStruct {
        address funder;
        uint amount;
    }

    FunderStruct[] public funderStructs;

    constructor ( uint _duration, uint _goal) public {
        owner = msg.sender;
        deadline = block.number + _duration;
        goal = _goal;
    }

    function isSuccess() public constant returns(bool isIndeed) {
        return (fundsRaised >= goal);
    }

    function hasFailed() public constant returns(bool hasIndeed) {
        return (fundsRaised < goal && block.number > deadline );
    }

    function

Copy an array…

clone = array => [...array]

Add something to the end of an array…

push = array => [...array, thing]

Remove the last item in an array…

pop = array => array.slice(0,1)

…or the first item…

shift = array => array.slice(1)

or an item at a specific index…

delete = i => array => [...array.slice(0,i), ...array.slice(i+1)]

If you are unsure whether a method mutates or not then checkout doesitmutate.xyz

Thank you Luke Jackson.

When building web applications on firebase, it is always a good idea to push the final application to the brand new firebase project.

Go into your firebase console and setup a new firebase project. Explicitly name this project something-something-PRODUCTION so that there is never any confusion between your original project and this new production one.

Your original project becomes your staging server. A safe place for you to try out new features and test things before you push the changes to your production server.

Your production server is the one you connect your domain to and share with the world.

You can flip between the two by connecting both firebase projects to your web application.

In the command line navigate into your project and type:

firebase use --add

The command line will ask you which project you want to connect to, scroll through the available projects till you...

With React’s new context API you can go a long way with a plain old react app before things become tedious. I encourage you to learn how to use the new context API before you reach for redux.

I also have tremendous respect for component setState. Learn how to use it before you start with redux. Did you know setState takes a callback? Did you know you can pass setState an updater function? Did you know that you can declare state changes outside of a component?

Using Redux before you understand how to use higher order components can also be a little confusing. Before you start using redux understand higher order components well enough to know when it’s better to use a render prop.

If you’re comfortable with context, you’ve mastered setState batching and you know what a prop-namespace-clash is, and you are still finding you app hard to manage then you are going to love redux.

Redux...

I’m giving up stateless functional components for a while.

They’re super nice but they’re not worth the refactor when you need a lifecycle method.

You could use recompose, which is also super nice, but completely avoidable.

Sticking to Class Components means I won’t need Recompose or a refactor.

If I’m going with Class Components then I might as well go with Pure Class Components.

React.PureComponent stops components from needlessly re-rendering. PureComponent is not something you use on a special occasion, it’s a sensible default.

The only reason I’d need to use a regular class component is when I want the component to re-render when a nested prop or value in state changes.

Then it’s back to React.Component and a shouldComponentUpdate(). A regular component without a shouldComponentUpdate method is now a red flag for me.

I use Pawel’s amazing snippet generator to create my new...

When you build a component in React you have the option to explicitly declare the type of props that it can, or must, accept by using the prop-types library.

This may seem like pointless extra work when you’re starting out, but when you begin working with other people declaring your props is a fantastic way to communicate how a component can be used and what it needs to work.

What you probably didn’t know is that Typechecking also make your code run faster. The V8 engine in chrome has something called Ignition, which is an interpreter. If your code consistently runs without type errors then V8 will skip the interpretation process and jump straight to turbo. Break the rules once and all your code will need to be interpreted from that point onwards. Strongly typed code runs in the fast lane.

The ‘prop-types’ library works for react code but it doesn’t work with all the non-react...

Create React App automatically reloads css style changes but not other code changes.

Adding hot modules to a create-react-app lets you change source code in your app and see the changes without the app reloading.

Below the ReactDOM.render function in src/index.js add the following snippet:

if (module.hot) {
  module.hot.accept("./App", () => {
    const NextApp = require("./App").default;
    ReactDOM.render(
      <NextApp/>,
      document.getElementById('root')
    );
  });
}

That’s it.

Go to your browser, update some source code and the changes will appear immediately.

Unfortunately, your app will lose internal state with any changes. I haven’t figured out a way to maintain state without ejecting or rewiring the app. To rewire you app checkout Dave Ceddia’s article on the topic.

If you want follow the approach above but you have a component in the index file (like a Routes...