getStore

Get a redux store to use in your app, which is already configured to use all kea plugins.

You are always free to create the redux store yourself (see the last section, however in that case you must take care to connect all the installed plugins yourself.

Usage

Shown are the default values:

// store.js
import { getStore } from 'kea'

export default getStore({
  // plugins to use globally (for all logic stores)
  plugins: [],

  // what root paths are available for kea
  paths: ['kea', 'scenes'],

  // additional reducers that your app uses
  reducers: {},

  // preloaded state for redux
  preloadedState: undefined,

  // middleware that gets passed to applyMiddleware(...middleware)
  middleware: [],

  // the compose function, defaults to the one from redux-devtools-extension or redux's own compose
  compose: composeWithDevTools || compose,

  // gets passed to compose(middleware, ...enhancers)(createStore)
  enhancers: []
})

// index.js
import { Provider } from 'react-redux'
import store from './store' // this has to come before App
import App from './app'

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

Example with react-router

For example, when using react-router (v4) and the Redux Devtools Extension:

// store.js
import { getStore } from 'kea'

import createHistory from 'history/createBrowserHistory'
import { routerReducer, routerMiddleware } from 'react-router-redux'

export const history = createHistory()

export default getStore({
  middleware: [
    routerMiddleware(history)
  ],
  reducers: {
    router: routerReducer
  }
})

// index.js
import { Provider } from 'react-redux'
import store from './store'
import App from './app'

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

Manually creating a store

Up until Kea v0.24 you had to manually create the store. With getStore this is no longer necessary.

If you still need to, here's how to do it:

import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
import { keaReducer } from 'kea'

const reducers = combineReducers({
  kea: keaReducer('kea'),
  scenes: keaReducer('scenes')
  // other app reducers here
})

const finalCreateStore = compose(
  // middlewares here
)(createStore)

const store = finalCreateStore(reducers)

If you then add plugins (e.g. kea-saga or other side effect library), read their documentation to find out how to connect them to the store.

See the documentation for keaReducer to read more about it.