Setting initial state for a decomposed Store

[pixeleet]

Hi there,

Quick question, how would I go on about introducing initial state from within a child component instead of passing it directly in main?

[milankinen]

Hmmm. What is the actual use case? If the parent component doesn't have any state yet and you're using partial.lenses, you could use L.defaults. Usage is quite straightforward:

-const {dispatch, props} = model(Store)
+const {dispatch, props} = model(Store.value.select(P(L.defaults(INITIAL_STATE))))

[pixeleet]

hey @milankinen, how about if I wanted to actually set that in the Store, not just default this piece of state to something if it doesn't exist yet?

[milankinen]

Do you mean something like this?

function main({DOM, Store}) {
  const {dispatch, props} = model(Store)
  const vdom = view(props)
  const actions = intent(DOM, Store)

  return {
    DOM: vdom,
    Store: dispatch(O.merge(actions))
  }

  function model({actions, value}) {
    const dispatch = actions.reduce((state, action) => {
      switch (action.type) {
        case "SET_INITIAL":
          return MY_INITIAL_VALUE
        // ....
      }
    })
    return ...
  }

  function view({num}) {
    return ...
  }

  function intent(DOM, store) {
    const setInitialStateAction = store.value
      .filter(val => val === undefined)
      .mapTo({type: "SET_INITIAL"})
      .take(1)
    ...
    return O.merge(setInitialStateAction, ...other actions...)
  }
}

[pixeleet]

@milankinen exactly, because let's say I have a component that is created and I have another component which is curious about the state of that component, but if I just default the value of the store for that component my other component wouldn't know about the default value of that component or I'd have to manually set the state to the same default.