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! :)