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)

いくつかのあってほしい解決策。実現されてほしい順で書いた

1. actions の非同期対応(foo.jsが動くようになってほしい)

actions が非同期になった途端に代入が走らないのは厳しい。async / await を推奨する記法になると、 await は Promise でない function も Promise として扱ってくれるので統一的なインターフェースになって嬉しい。

その際 actions がルートから呼ばれたかどうかを判断するのは厳しいので、どちらにせよ 2. が欲しくなるかもしれない。

2. React でいう this.setState() の実装

これは actions.setState を用意して object-rest-spread を書くと自力で簡単に実装できるが、コアにほしい。

Jorge に聞きたいこと

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

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