Examples

This page is a good place to start learning Zedux. Let's jump right in. Refer to the api and types documentation if you get lost.

Counter

Nice and easy.

import { act, createStore, react } from 'zedux'

// Create a couple actors (fancy action creators)
const increment = act('increment')
const decrement = act('decrement')

// Create the reactor (fancy reducer)
const counterReactor = react(0) // 0 - the reactor's initial state
  .to(increment)
  .withReducers(state => state + 1)

  .to(decrement)
  .withReducers(state => state - 1)

// Create the store
const store = createStore()
  .use(counterReactor)

// Play with it
store.dispatch(increment())
store.dispatch(increment())
store.dispatch(decrement())

store.getState() // 1

See the createStore, act, and react api docs.

See the actor and reactor type docs.

Todos

store/todos.js

import { act, react } from 'zedux'

// Create some actors (fancy action creators)
export const addTodo = act('addTodo')
export const toggleTodo = act('toggleTodo')

// Create the reactor (fancy reducer)
export default react([]) // [] - the reactor's initial state
  .to(addTodo)
  .withReducers(addTodoReducer)

  .to(toggleTodo)
  .withReducers(toggleTodoReducer)

let todosIdCounter = 0

// Create some hoisted sub-reducers for our reactor to delegate to
function addTodoReducer(state, { payload: text }) {
  const id = todosIdCounter++
  const newTodo = { id, text, isComplete: false }

  return [ ...state, newTodo ]
}

function toggleTodoReducer(state, { payload: id }) {
  return state.map(todo =>
    todo.id === id
      ? { ...todo, isComplete: !todo.isComplete }
      : todo
  )
}

See the act and react api docs.

store/visibilityFilter.js

import { state, transition } from 'zedux'

// Create some states (fancy actors)
export const showAll = state('showAll')
export const showCompleted = state('showCompleted')
export const showIncomplete = state('showIncomplete')

// Create the state machine (fancy reactor)
export default transition(showAll)
  .undirected(showAll, showCompleted, showIncomplete)

This example uses the state machine model. We declare a few states with the built-in state() factory then create a reactor using the built-in transition() factory to create a ZeduxMachine.

Zedux machines are awesome for describing how states transition to and from each other. Here we're using the special undirected() method which creates undirected graph edges between all the given states.

store/index.js

import { createStore } from 'zedux'

import todos from './todos'
import visibilityFilter from './visibilityFilter'

// Create the store, passing a hierarchy descriptor.
export default createStore()
  .use({
    todos,
    visibilityFilter
  })

See the createStore api doc and the HierarchyDescriptor type.

Now we can have fun with this guy:

import store from './store/index'
import { showAll, showIncomplete } from './store/visibilityFilter'
import { addTodo, toggleTodo } from './store/todos'

store.subscribe((newState, oldState) => {
  console.log('state changed! Old state:', oldState, 'New state:', newState)
})

store.dispatch(showAll())
store.dispatch(addTodo('be the super genius'))
store.dispatch(toggleTodo(0))