Push initial value to Redux selector observers

CHANGELOG.md

@@ -0,0 +1,9 @@
+<!-- prettier-ignore-start -->
+# Changelog
+
+## 25 September 2018
+
+| Package | Version | Type | Changes |
+| --- | --- | --- | --- |
+| refract-redux-callbag<br>refract-redux-most<br>refract-redux-rxjs<br>refract-redux-xstream | 1.1.0 | Bug | [(#75)](https://github.com/fanduel-oss/refract/pull/75) initialise Redux selector observers with their initial value |
+<!-- prettier-ignore-end -->

base/redux/observable.ts

@@ -23,8 +23,11 @@ export const observeFactory = (store): ObserveFn => {
  }
 
  if (typeof actionOrSelector === 'function') {
+ const initialValue: T = actionOrSelector(store.getState())
+
  return storeObservable.pipe<T>(
  map(actionOrSelector),
+ startWith(initialValue),
  distinctUntilChanged<T>()
  )
  }

base/redux/observable_callbag.ts

@@ -4,6 +4,7 @@ const fromObs = require('callbag-from-obs')
 const dropRepeats = require('callbag-drop-repeats')
 const map = require('callbag-map')
 const pipe = require('callbag-pipe')
+const startWith = require('callbag-start-with')
 
 import { Selector } from './baseTypes'
 
@@ -38,7 +39,14 @@ export const observeFactory = (store): ObserveFn => {
  }
 
  if (typeof actionOrSelector === 'function') {
- return pipe(storeObservable, map(actionOrSelector), dropRepeats())
+ const initialValue: T = actionOrSelector(store.getState())
+
+ return pipe(
+ storeObservable,
+ map(actionOrSelector),
+ startWith(initialValue),
+ dropRepeats()
+ )
  }
  }
 }

base/redux/observable_most.ts

@@ -1,4 +1,4 @@
-import { from, Stream, Subscriber as Listener } from 'most'
+import { from, Stream, Subscriber as Listener, of } from 'most'
 import $$observable from 'symbol-observable'
 import { Selector } from './baseTypes'
 
@@ -27,7 +27,12 @@ export const observeFactory = (store): ObserveFn => {
  }
 
  if (typeof actionOrSelector === 'function') {
- return storeObservable.map(actionOrSelector).skipRepeats()
+ const initialValue: T = actionOrSelector(store.getState())
+
+ return storeObservable
+ .map(actionOrSelector)
+ .merge(of(initialValue))
+ .skipRepeats()
  }
  }
 }

base/redux/observable_xstream.ts

@@ -28,7 +28,12 @@ export const observeFactory = (store): ObserveFn => {
  }
 
  if (typeof actionOrSelector === 'function') {
- return storeObservable.map(actionOrSelector).compose(dropRepeats())
+ const initialValue: T = actionOrSelector(store.getState())
+
+ return storeObservable
+ .map(actionOrSelector)
+ .startWith(initialValue)
+ .compose(dropRepeats())
  }
  }
 }

docs/usage/observing-redux.md

@@ -29,7 +29,7 @@ Each observed action is passed into your stream with all its data - including th
 
 ## Observing State
 
-If you pass in a function, `store.observe` will treat it as a Redux selector, and return a stream which subscribes to the state using your function. Any time the selected slice of state changes, its new value will be piped to your stream.
+If you pass in a function, `store.observe` will treat it as a Redux selector, and return a stream which subscribes to the state using your function. It is initialised with the selector current value and any time the selected slice of state changes, its new value will be piped to your stream if changed (`===` comparison).
 
 ```js
 const storeShape = {

package.json

@@ -8,8 +8,7 @@
  "copy": "node ./scripts/copy",
  "generatePackages": "node ./scripts/generatePkg",
  "prebuild": "npm run generatePackages && npm run copy",
- "build":
- "npm run build:react && npm run build:redux && npm run build:inferno && npm run build:preact",
+ "build": "npm run build:react && npm run build:redux && npm run build:inferno && npm run build:preact",
  "build:react": "MAIN_LIB=react rollup -c rollup.config.js",
  "build:redux": "MAIN_LIB=redux rollup -c rollup.config.js",
  "build:preact": "MAIN_LIB=preact rollup -c rollup.config.js",
@@ -20,8 +19,7 @@
  "test:preact": "jest --config base/__tests__/preact/jest.config.js",
  "test:inferno": "jest --config base/__tests__/inferno/jest.config.js",
  "test:redux": "jest --config base/__tests__/redux/jest.config.js",
- "test":
- "npm run test:react && npm run test:inferno && npm run test:preact && npm run test:redux",
+ "test": "npm run test:react && npm run test:inferno && npm run test:preact && npm run test:redux",
  "precommit": "lint-staged",
  "prerelease": "npm run build",
  "release": "node ./scripts/publish"
@@ -36,6 +34,7 @@
  "callbag-from-obs": "~1.2.0",
  "callbag-map": "~1.0.1",
  "callbag-pipe": "~1.1.1",
+ "callbag-start-with": "~3.1.0",
  "callbag-to-obs": "~1.0.0",
  "checksum": "~0.1.1",
  "enzyme": "~3.3.0",
@@ -75,7 +74,14 @@
  "xstream": "~11.7.0"
  },
  "lint-staged": {
- "*.{ts,tsx}": ["prettier --write", "tslint", "git add"],
- "*.{js,md}": ["prettier --write", "git add"]
+ "*.{ts,tsx}": [
+ "prettier --write",
+ "tslint",
+ "git add"
+ ],
+ "*.{js,md}": [
+ "prettier --write",
+ "git add"
+ ]
  }
 }

packages.js

@@ -50,7 +50,8 @@ const extraDependencies = {
  'refract-redux-callbag': {
  'callbag-drop-repeats': '~1.0.0',
  'callbag-map': '~1.0.1',
- 'callbag-pipe': '~1.1.1'
+ 'callbag-pipe': '~1.1.1',
+ 'callbag-start-with': '~3.1.0'
  }
 }
 

packages/refract-redux-callbag/package.json

@@ -17,6 +17,7 @@
  "callbag-from-obs": "~1.2.0",
  "callbag-map": "~1.0.1",
  "callbag-pipe": "~1.1.1",
+ "callbag-start-with": "~3.1.0",
  "symbol-observable": "~1.2.0"
  },
  "keywords": [

yarn.lock

@@ -680,6 +680,10 @@ callbag-skip@1.0.x:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/callbag-skip/-/callbag-skip-1.0.0.tgz#91f60c434d1a7aba02b8b7ef1aad82da0a805ceb"
 
+callbag-start-with@~3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/callbag-start-with/-/callbag-start-with-3.1.0.tgz#58c7f7cb3f3f44049e130166c2cf884c76e332ac"
+
 callbag-take@1.0.x:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/callbag-take/-/callbag-take-1.0.0.tgz#d3d3acf3f73ef9a7cda42958dfb4de37b9c0a2b8"