two new developments this week got me excited about experimenting:

and with the freakout over redux recently i got to wondering if there might be a better way to do react and redux.

steps to experiment

  • have parcel 1.6 installed
  • npm init -y
  • touch index.html index.js
  • npm i react-dom react@16.3.0-alpha.1
  • npm install --save-dev babel-plugin-transform-object-rest-spread
  • npm install --save-dev babel-plugin-transform-class-properties
  • and then do these files…

i ran into pretty bad context troubles. these didnt work:

i also studied unstated for a fresher idea

https://github.com/facebook/react/issues/5927 so i stopped there.

anyway lets just prototype freely here

import React from 'react';
import Component from './RCC'

export default ({ name }) => (<div>
<h1>Hello {name}!</h1>
  <Component
    initialState=
    didMount={({ setState }) => {
      fetch("https://api.github.com/gists")
        .then(res => res.json())
        .then(gists => setState({ gists }));
    }}
  >
    {({ state }) =>
      state.gists ? (
        <ul>
          {state.gists.map(gist => (
            <li key={gist.id}>{gist.description}</li>
          ))}
        </ul>
      ) : (
          <div>Loading...</div>
        )
    }
  </Component>
</div>);

a reducer looks like:

export default (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

so you can do createStore(counter) on it and use it


  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />