jide

export const loadPost = async ({ state, effects }, id) => {
  state.loading = true;
  const { post } = await effects.gql.queries.post({ id });
  state.post = post;
  state.loading = false;
 }

jide

export const myAction = ({ state, effects, actions }, value) => {

}

jide

<div id="root"></div>

jide

‎‎​

jide

import { connect } from 'react-redux';
import { removeUser } from '../reducers/user';

import Users from '../components/Users';

const Container = connect(
  (state, props) => ({
    users: state.users.all,
    options: state.options,
    isAdmin: state.currentUser[props.userId].isAdmin === true

jide

import { connect } from 'react-redux';
import { addTodo } from '../reducers/todo';

import AddTodo from '../components/AddTodo';

const Container = connect(
  state => ({
    todos: state.todos.all
  }),
  { addTodo },

jide

import { connect } from 'react-redux';
import { addTodo } from '../reducers/todo';

import AddTodo from '../components/AddTodo';

const Container = connect(
  state => ({
    todos: state.todos.all
  }),
  { addTodo }

jide

import React from 'react';
import shallowEqual from 'react/lib/shallowEqual';

const getDisplayName = Component => Component.displayName || Component.name || 'Component';

export default WrappedComponent => {
  return class Pure extends React.Component {

    static displayName = `$pure(${getDisplayName(WrappedComponent)})`;

jide

tracked (fork)

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation

jide

const Block = ({ x, width, title, subtitle }) =>
  <div style={{ left: x, width }}>
    <div style={{ color: width > 100 ? 'red' : 'green' }}>{ title }</div>
    <div>{ subtitle }</div>
  </div>