Our file is starting to get a bit verbose. Let us look into how you typically organize a Cerebral application.

Create a main module 

We will first move the logic for defining the module into its own file under src/main/index.js:

import * as sequences from './sequences'
import * as providers from './providers'

export default {
  state: {
    title: 'My Project',
    posts: [],
    users: {},
    userModal: {
      show: false,
      id: null
    isLoadingPosts: false,
    isLoadingUser: false,
    error: null

Create an actions file 

Our actions should be contained in its own file at src/main/actions.js:

import { state } from 'cerebral'

export const getPosts =  ({ api }) =>
  api.getPosts().then(posts => ({ posts }))

export const getUser = ({ api, props }) =>
  api.getUser( => ({ user }))

Create a sequences file 

The same for sequences at src/main/sequences.js:

import { set } from 'cerebral/factories'
import { state, props } from 'cerebral'
import * as actions from './actions'

export const openPostsPage =  [
  set(state`isLoadingPosts`, true),
  set(state`posts`, props`posts`),
  set(state`isLoadingPosts`, false)

export const openUserModal = [
  set(state``, true),
  set(state``, props`id`),
  set(state`isLoadingUser`, true),
  set(state`users.${props`id`}`, props`user`),
  set(state`isLoadingUser`, false),

Create a provider file 

Jup, that’s right! src/main/providers.js:

const API_URL = ''

export const api = {
  getPosts() {
    return fetch(`${API_URL}/posts`)
      .then(response => response.toJSON())
  getUser(id) {
    return fetch(`${API_URL}/users/${id}`)
      .then(response => response.toJSON())

We are left with 

In our src/index.js file we are now left with:

import App from 'cerebral'
import Devtools from 'cerebral/devtools'
import main from './main'

const app = App(main, {
  devtools: Devtools({
    host: 'localhost:8585'

const openPostsPage = app.get(sequences.openPostsPage)


Now this looks a lot cleaner and scalable. By adding a modules directory to src/main you can add more modules with domain specific names like admin or posts. These modules are added to the main module.