JSFiddle - React, Tailwind, and code Playground

by bowheart

HTML

<script src="https://unpkg.com/[email protected]/dist/zedux.js"></script>

JavaScript

const { compose, createStore, react, state, transition } = Zedux

const idle = state('idle')
const requestStarted = state('requestStarted')
	.onEnter((dispatch, action, state) => {
  	fetch('https://api.github.com/users')
      .then(response => response.json())
      .then(compose(dispatch, requestSuccess))
      .catch(compose(dispatch, requestFailure))
  })

const requestFailure = state('requestFailure')
const requestSuccess = state('requestSuccess')

const githubUsersMachine = transition(idle)
	.to(requestStarted)
  .to(requestFailure, requestSuccess)
  .to(idle) // must be specifically invalidated to request again

const usersReactor = react([])
  .to(requestSuccess)
  .withReducers((state, { payload }) => payload)

const store = createStore()
	.use({
  	fetchStatus: githubUsersMachine,
    users: usersReactor
  })

store.subscribe(state => console.log('state changed', state))

store.dispatch(requestStarted())