Derived store problem

[mendrik]

I have a store A and a derived store which is B = A.map(...dostuff...). I also have an effect fx that I want to listen to in both stores.

A.on(fx.done, (state, result) => ...)
B.on(fx.done, (state, result) => ...)

Now I expect B listener to run after the mapping has been updated, but it seems it doesn't.

I also get warnings that .on is deprecated for derived stores. How can I tackle this?

so I would like to have somewhat like this: A(fx.done) -> update A -> update B -> B(fx.done)

[sergeysova]

@mendrik You MUST not to add .on to derived stores. Derived stores MUST be updated only by its parent store.

[sergeysova]

@mendrik Why you need to react on fx.done for B store?

Can you explain you business-task?

[mendrik]

I have a store with a model, and I have a derived store which converts the model to some algebraic type. Now I have an effect which modifies the raw model store, but also needs data from the algebraic type to trigger an effect. So I thought I can listen to the same event in both.

I have however changed the logic now a bit like so:

const rawTreeCreateNode = createEvent<ApiResult<'nodeCreate'>>()
const treeCreateNode = createEvent<ApiResult<'nodeCreate'>>()

const $rawTree = createStore<Node>...)
  .on(rawTreeCreateNode, (state, result) => result.tree)

export const $treeStore = $rawTree.map(unless(isNil, TreeNode.from<Node, 'children'>('children')))

$treeStore.watch(treeCreateNode, (state, result) => {
  const node = state.first(propEq('id', result.nodeId)) ?? null
  selectNode(node)
})

createNodeFx.done.watch(({ result }) => {
  rawTreeCreateNode(result)
  treeCreateNode(result)
})

what I thought I could have done previously was:

const $rawTree = createStore<Node>(...)
  .on(createNodeFx.done, ...)

export const $treeStore = $rawTree.map(unless(isNil, TreeNode.from<Node, 'children'>('children')))
   .on(createNodeFx.done, ...)

[doasync]

I would recommend using a declarative approach and replace:

$treeStore.watch(treeCreateNode, (state, result) => {
  const node = state.first(propEq('id', result.nodeId)) ?? null
  selectNode(node)
})

with

sample({
  source: $treeStore,
  clock: treeCreateNode
  fn: (state, result) => state.first(propEq('id', result.nodeId)) ?? null,
  target: selectNode,
})

createNodeFx.done.watch(({ result }) => {
  rawTreeCreateNode(result)
  treeCreateNode(result)
})

with

sample({
  clock: createNodeFx.doneData,
  target: [rawTreeCreateNode, treeCreateNode]
})

[doasync]

I could not understand the problem by looking at the code, but I think it should be something like this:

const $rawTree = createStore<Node>...)
  .on(createNodeFx.doneData, (state, result) => result.tree)

export const $tree = $rawTree.map(unless(isNil, TreeNode.from<Node, 'children'>('children')))

sample({
  source: $tree,
  clock: createNodeFx.doneData
  fn: (state, result) => state.first(propEq('id', result.nodeId)) ?? null,
  target: selectNode,
})

[mendrik]

Hi, the sample function works great! Thank you