This documentation is for the old Kea 0.28. To see the latest docs, click here!

keaReducer(reducerRoot)

Define paths in Redux which Kea can use.

Usage

import { keaReducer } from 'kea'
import { combineReducerse, createStore } from 'redux'

const reducers = combineReducers({
  kea: keaReducer('kea'),
  scenes: keaReducer('scenes'),
  // ... other reducers you might have
})

const store = createStore(reducers)

After this you may use paths like path: () => ['scenes', '...', 'bla'] in your logic stores.

All logic stores that are defined without paths will be mounted under the first registered reducer, in this case under kea.*

Run keaReducer before kea!

Note: This was a hard requirement before v0.23.5. Now it's just a strong suggestion.

Please note that the call to keaReducer has to be executed before any subsequent calls to kea(). Take for example this sample scenario:

// store.js
export default function createStore () {
  const reducers = combineReducers({
    scenes: keaReducer('scenes'),
    routes: routeReducer,
    // ...
  })

  const store = //...

  return store
}

// app.js
@kea({})
export default class MyComponent extends Component {
  // ...
}

// index.js
import createStore from 'store'
import App from 'app'

const store = createStore()

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

In this case when you import App from 'app', you're immediately running the kea() calls. Even though you imported createStore before App and run it before rendering the app, the kea() functions are run before keaReducer.

When running this code, you will run into errors such as: [KEA-LOGIC] Path starting with "scenes" is not connected to the reducer tree! (3) ["scenes", "counter", "index"].

To fix this, you must bring keaReducer up by one level, so it's evaluated when createStore is imported, like so:

// store.js
const keaScenesReducer = keaReducer('scenes')

export default function createStore () {
  const reducers = combineReducers({
    scenes: keaScenesReducer,
    routes: routeReducer,
    // ...
  })
  // ...
}

Happy hacking! :)