redux-reorder
Higher-order reducer that tracks order fluctuation within iterable state
The Problem
You have a reducer that holds on to iterable state. Its order periodically updates.
You would like to know how the order has changed relative to a previous order.
This package appends a given reducer with a representation of how its new order has changed from a previous order.
A use case
Showing the evolution of a leaderboard.
Let's say your application monitors the (daily) exchange rates of cryptocurrencies. A useful thing. Occasionally, one currency jumps ahead in value of another, and your state changes to reflect this.
You now want to show the extent of this change in your UI.
The implementation
Reducer wrapping
./reducers/index.js
...otherReducers // We'll pass a reducer that manages iterable state to grokReorders. // It takes a config object as the second argument, where the number of calls // (= step) to the reducer initiated by a specified action type (= reorderType) // required before fluctuation is recalculated can be specificed. currencies: // state.currencies will now look like: { iterable: <Iterable>, fluctuationMap: <Array> }
Connecting to React
./components/Leaderboard.js
// A component which we imagine can display the order delta for a given item in a list. { // Recall that grokReorders changes the shape of the reducer it accepts as // an argument. // Now, with currencies.iterable we have access to the iterable as // originally returned by the reducer that was passed to grokReorders. With // currencies.fluctuationMap we have an array of integers which 'say' how 'far' // each element has moved from its last 'known' position. // For example, if currencies.fluctuationMap looks like [-1,1,0,0], then the // first element in currencies.iterable has moved 'up' one index from where it // last was, the second has moved 'down' one index, and so forth. const currencies: iterable fluctuationMap = thisprops return <div> iterable </div> } { return statecurrencies } // Inject the part of state we care about as a prop in Leaderboard.mapStateToPropsLeaderboard
Installation
npm i -S redux-reorder
or
yarn add redux-reorder