bar.js

// 現実
const { app, h } = hyperapp
/** @jsx h */

const state = {
  isInited: false,
  users: []
}

const actions = {
  fetchUsers: () => (_, actions) => {
    axios.get('https://jsonplaceholder.typicode.com/users')
    .then(({ data }) => {
      actions.setUsers({ users: data })
      actions.setInited()
    })
  },
  setInited: () => () => ({
    isInited: true
  }),
  setUsers: ({ users }) => () => ({
    users
  })
}

const view = (state, actions) => {
  if (!state.isInited) {
    actions.fetchUsers()
    return (<div></div>)
  }
  console.log(state.users)
  return (
    <div>
      <ul>
        {state.users.map((user) => (<li>{user.name}</li>))}
      </ul>
    </div>
  )
}

app(state, actions, view, document.body)

foo.js

// 動いてほしいやつ　
const { app, h } = hyperapp
/** @jsx h */

const state = {
  isInited: false,
  users: []
}

const actions = {
  fetchUsers: () => async () => {
    const { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
    return {
      isInited: true,
      users: data
    }
  }
}

const view = (state, actions) => {
  if (!state.isInited) {
    actions.fetchUsers()
    return (<div></div>)
  }
  return (
    <div>
      <ul>
        {state.users.map((user) => (<li>{user.name}</li>))}
      </ul>
    </div>
  )
}

app(state, actions, view, document.body)

Jorge に聞きたいこと

setState を自力で生やすのはアリ？ナシ？

それぞれのアクションが 状態に関与しないアクション なのか 状態に関与するアクション なのかは明確に区別されていないとアクションという概念が著しく可読性を下げる気がしてる。なので状態の変更は setState アクションをもってのみ行うことができるような形で書くと最低限の治安が保たれる気がしているけれどどうだろう 🤔