redux-heat 🔥

Redux side-effects as a function of state.

• Reducers and action creators as pure functions;
• It is not a middleware, so setup and testing are super easy;
• Follows the same pattern as React (decide what to do based on the state and not the actions);
• Effects are pure functions.

Install

Add it as a dependency in your project:

npm install --save redux-heat

Usage

Here is a simple example to fetch user details once the id of the user changes is the Redux store:

import subscribe from 'redux-heat'

// Define a selector to define what data to check for changes
const getUserId = state => state.userId

// Action creators
const setUserDetails = user => ({ type: 'SET_USER_DETAILS', payload: user })
const notifyUserFetchFailed = error => ({ type: 'FETCH_USER_FAILED', payload: e })

const fetchUser = userId => fetch(`/user/${userId}`)

// Describe the effect based on state changes
const fetchUserHeat = state => ({
  fn: fetchUser,
  args: [getUserId(state)],
  onValue: setUserDetails,
  onError: notifyUserFetchFailed
})

// Then subscribe the effect to the Redux store
subscribe(reduxStore, [fetchUserHeat])