Skip to content

Instantly share code, notes, and snippets.

Jidé jide

Block or report user

Report or block jide

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@jide
jide / UsersContainer.js
Last active Dec 19, 2017
More complex optimized redux connectors.
View UsersContainer.js
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
jide / AddTodoContainer.js
Last active Dec 19, 2017
Optimized redux connectors.
View AddTodoContainer.js
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
jide / AddTodoContainer.js
Last active Nov 24, 2017
Unoptimized redux connectors.
View AddTodoContainer.js
import { connect } from 'react-redux';
import { addTodo } from '../reducers/todo';
import AddTodo from '../components/AddTodo';
const Container = connect(
state => ({
todos: state.todos.all
}),
{ addTodo }
View *tracked.md

tracked (fork) npm

@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

View block.jsx
const Block = ({ x, width, title, subtitle }) =>
<div style={{ left: x, width }}>
<div style={{ color: width > 100 ? 'red' : 'green' }}>{ title }</div>
<div>{ subtitle }</div>
</div>
View styled-variables.jsx
import React, { Component } from 'react';
import styled from 'styled-components';
import { Motion, spring } from 'react-motion';
const Title = styled.h1`
font-size: 3.5em;
text-align: center;
transform: var(--transform);
color: var(--color, palevioletred);
`;
View todos-wire.js
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { createElement, wire } from 'react-redux-wire'
import reducer from './reducers'
import { toggleTodo, addTodo, setVisibilityFilter } from './actions'
import App from './components/App'
import TodoList from './components/TodoList'
import AddTodo from './components/AddTodo'
import Link from './components/Link'
View wire.js
let WrappedComponent;
if (Component.prototype.render) {
WrappedComponent = type;
}
// If it is a stateless component, we wrap it in a stateful component to be able to use lifecycle
// hooks.
else {
WrappedComponent = class extends Component {
render() {
View app.js
TodoList.mapStateToProps = state =>
({ todos: getVisibleTodos(state.todos, state.visibilityFilter) })
TodoList.mapDispatchToProps = dispatch =>
({ onTodoClick: id => dispatch(toggleTodo(id)) })
wire(TodoList)
You can’t perform that action at this time.