Kea 1.0

Hi all,

I’ve been rewriting Kea in order to reach the big 1.0 milestone for several days now. I’m nearly there. However before releasing anything, I’d like to ask the community for help with testing and ironing out any edge cases that might show up.

So please, if you’re using kea in your app, read the “How to test?” section below, try it out and report any issues you may experience.

So what changed?

Check out the long list of changes here:

https://github.com/keajs/kea/blob/master/docs/CHANGES-1.0.md

Updated 2019/06/13 with changes for 1.0.0-beta.31 Updated 2019/04/28 with changes for 1.0.0-beta.15

[mariusandra]

Hi everyone,

As of beta.31 we now support basic hooks!

const logic = kea({
  actions: () => ({
    updateName: name => ({ name })
  }),
  reducers: ({ actions }) => ({
    name: ['Bob', {
      [actions.updateName]: (_, payload) => payload.name
    }]
  })
})

function NameComponent (props) {
  const { name } = useProps(logic)
  const { updateName } = useActions(logic)

  return (
    <div>
      <div>Name: {name}</div>
      <button onClick={() => updateName('George')}>Change</button>
    </div>
  )
}

It’s still a work in progress and there are some gotchas, but it’s getting there.

I put up a long doc with all the 1.0 changes here: https://github.com/keajs/kea/blob/master/docs/CHANGES-1.0.md

[mariusandra]

Hi @etiennecl , thank you for the continued work on this. I indeed made some big changes regarding context in the latest beta (v20). Previously kea had an “internal context” called a cache, which was set when your bundle loaded and reset when forced to via resetKeaCache. This worked fine in the browser, when the cache was always empty on each page load and never reset, but it caused issues with SSR and frameworks like next.js.

With the changes in beta.20, this cache is now explicitly called a context and there are tools to mainpulate it. (Functions like getContext, setContext, resetContext, withContext, etc). I will write better documentation about it as soon as I can.

However until then, you should run resetContext() before any call to kea is made if you wish to configure defaults, plugins, etc. You should no longer pass plugins to the store. Instead pass them to the context.

Another big change is that previously we would store all the data inside logic stores (const logic = kea({})). Now logic stores are just a collection of functions that delegate to the context. So theoretically if you swap out the context, everything else should still work.

Yet another big change is that the lifecycle of kea logic is also more clearly defined. A logic can be in any of these 3 states: 1) initialized, 2) built, 3) mounted.

1. initialized: Now when you call kea({}) the logic store is just initialized and added to the context (to context.inputs). Nothing will be automatically built not mounted.

2. built: This refers to converting the kea input (kea(input)) into a logic (object with keys actions, reducers, selectors, etc). Previously this happened automatically in step 1, but now it’s deferred as late as possible.

3. mounted:. A logic is mounted if it is connected to redux. This is also when all the sagas and other side effects run and do what they need to do. This happens automatically when you wrap a logic around a React component. If a component is not built when you try to mount it, it will be built automatically.

Before 1.0 all kea logics (at least the ones without a key) were automatically mounted when they were initialized. This is no longer the case. If you wish to revert to the pre-1.0 behaviour, run resetContext({ autoMount: true }) before any calls to kea() are made.

(NB! kea({ options:{lazy: true} }) no longer works. It’s all configured from the context now. I need to update the docs…)

Like I said, logics are automatically mounted when you wrap them around react components. However if you need to mount them manually, it’s also possible:

const logic = kea({ ... })

resetContext({ ... })

const unmount = logic.mount()

const { store } = getContext()

store.dispatch(logic.actions.bla())
const value = logic.selectors.getStuff(store.getState())

unmount()

Mounting like this should also start the sagas.

For next.js and the getIinitialProps, I still need to experiment with it and see how it could all work. The building blocks are all there, just I need to make sure they fit well. I’ll get to it in the next days. It’s possible the next redux wrapper needs to be opened up and adjusted to make it all work.

I’ll share more news when I have any. Cheers!