FreactalTest.js

import React from 'react'
import { provideState, injectState, softUpdate } from 'freactal'

const wrapParentWithState = provideState({
  initialState: () => ({
    toggleMe: true
  }),
  effects: {
    toggle: softUpdate(state => ({ toggleMe: !state.toggleMe }))
  }
})

const ParentWithState = wrapParentWithState(() => (
  <Parent>
    props.children: <Child />
    <hr />
    BROKEN props.children, with provideState: <ChildWithState />
  </Parent>
))

const Parent = injectState(({ state: { toggleMe }, children }) => (
  <div>
    <div>Parent: toggleMe is {toggleMe ? 'true' : 'false'}</div>
    <hr />
    <div>{children}</div>
    <hr />
    <div>direct: <Child /></div>
    <hr />
    <div>direct, with provideState: <ChildWithState /></div>
  </div>
))

const Child = injectState(({ state: { toggleMe }, effects: { toggle } }) => (
  <div>
    <button onClick={() => toggle()}>Toggle</button>
    toggleMe is {toggleMe ? 'true' : 'false'}
  </div>
))

const wrapChildWithState = provideState({
  initialState: () => ({}),
  effects: {}
})

const ChildWithState = wrapChildWithState(Child)

export default ParentWithState