Installation

Installing kea is rather straightforward. You need to add the kea package, install any plugins and connect your store to Redux.

This guide describes two ways to install Kea:

1. Adding kea to an existing app, either with create-redux-app or without
2. Starting a new kea app from scratch

1. Adding to an existing app

1.1. Install the packages

First install the packages:

# if you're using yarn
yarn add kea redux react-redux reselect

# if you're using npm
npm install kea redux react-redux reselect --save

1.2. Configure Redux

Then configure the Redux store. You may either do it manually or use the getStore helper. We recommend using the helper, as it will also configure any installed plugins (e.g. kea-saga). You may pass additional middleware and reducers as options.

First, create a file called store.js with the following content:

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

export default getStore({
  // additional options (e.g. plugins, middleware, reducers, ...)
})

Then import this in your app's entrypoint before any calls to kea() are made. In practice this means you should import your store before your root component.

Finally, wrap your <App /> with Redux's <Provider />.

This is how your entrypoint would look like if you used create-react-app:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; // <--- add this

import './index.css';

import store from './store'; // <--- add this BEFORE App
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

registerServiceWorker();

1.3. Optional: Enable decorators

Kea makes use of an experimental support for decorators to make your code nicer to read. If you wish to use this feature, follow the guide here: babel-plugin-transform-decorators-legacy.

1.3.1. Decorators for apps made with create-react-app

If your app was made with create-react-app, you have two options for installing support for decorators.

You may install them ejecting your webpack configuration and following the guide from above.

If you wish to avoid that, you have to find some other way. The easiest option is to replace react-scripts with custom-react-scripts.

To do this, first run these commands:

yarn add custom-react-scripts
yarn remove react-scripts

Then create a file called .env in the root of your project and add this:

REACT_APP_DECORATORS=true

Now you will be able to use decorators in your code

2. Starting a new kea app from scratch

Kea comes with a CLI tool that can generate a skeleton for your app. Ues it like so:

npm install -g kea-cli
kea new my-project
cd my-project
yarn       # ... or npm install
yarn start # ... or npm start

Continue with the guide

Next page: Counter