Framework-Agnostic Web Applications with Redux at Frontend Conf 2017

Framework-Agnostic Web Applications

Agnostic (adjective)

Agnostic a: unwilling to commit to an opinion about something.
(adjective)

Agnostic a: unwilling to commit to an opinion about something.
b: compatible with many types of platforms or operating systems. (adjective)

Framework-Agnostic Web Apps

Framework-Agnostic Web Apps Applications that are designed in such a
way that make them not tied to a particular framework.

Why is this important?

let’s talk about THE WEB.

05 06 07 08 09 10 11 12 13 14
15 ® React Native 10 Years in Web

05 06 07 08 09 10 11 12 13 14
15 ® React Native DOM

05 06 07 08 09 10 11 12 13 14
15 ® React Native CSS

05 06 07 08 09 10 11 12 13 14
15 ® React Native Applications

05 06 07 08 09 10 11 12 13 14
15 ® React Native Tests

05 06 07 08 09 10 11 12 13 14
15 ® React Native Dependencies

05 06 07 08 09 10 11 12 13 14
15 ® React Native Tooling

05 06 07 08 09 10 11 12 13 14
15 ® React Native Transpilation

05 06 07 08 09 10 11 12 13 14
15 ® React Native

Javascript FATIGUE

11 12 13 14 15 16 17 npm modules over
time [Breaking News] This is not going to slow down.

This is not necessarily bad.

This is not necessarily bad. We just have to get
used to it.

used to it. Code that embraces change.

used to it. Code that embraces change. Agnostic Code.

Framework-Agnostic Web Apps

Framework-Agnostic Web Apps Allow us to easily switch to a
better fitting framework without the need for a rewrite.

Why is this important?

the web moves faster than you Why is this important?
(and that’s ok)

How developers judge frameworks?

How everybody-else judges frameworks?

How everybody-else judges frameworks? *shrinks*

Users don’t give a DAMN.

2.7B £ ANGULAR 1

VUE $6B

REACT $8.8B

Focus more on how to build great products.

Views how it looks

Views how it looks Routing what pages do I have

Views how it looks App Logic what happens if I
click here Routing what pages do I have

click here Routing what pages do I have Persistence how do I create/update data, optimistic updates, data consistency

click here Business Logic what data do I have, how do I interact with it it, who can do what, etc. Routing what pages do I have Persistence how do I create/update data, optimistic updates, data consistency

(and that’s ok)

(and that’s ok) users judge you on your product. (and that’s diﬃcult on its own)

How do I even FAWA? Nuﬀ said. shamefully trying to
create an acronym.

REDUX *increasingly loud drum roll*

A library to manage state of your application. — Redux
docs

A library to manage state of your application. — Redux
docs Your framework-agnostic best friend. — Me

REDUX APPS run in different environments (Good because the web
moves fast)

REDUX APPS run in different environments (Good because the web
moves fast) (Good because making good products is hard) behave consistently and are easy to test.

Store Action Reducer Component

Store Action Reducer Component Framework-Agnostic Your framework Probably replaced every
6 months Build to last

STORE ACTIONS REDUCERS

import { createStore } from 'redux'; const store = createStore();
Redux Store

store.getState(); Holds the whole state tree of your application. Redux
Store { todos: [ { name: 'Attend Frontend Conf' }, { name: 'Introduce Redux Store' }, ], }

Everything is state.

Everything is state. Dissecting Twitter's Redux Store by Ryan Johnson

Everything is state. Dissecting Twitter's Redux Store by Ryan Johnson
Tweets Users Lists Cards Timeline Settings Notifications …

store.subscribe(listener); Handles state change listeners. Redux Store

store.dispatch(action); Allows state to be updated by dispatching actions Redux
Store

STORE ACTIONS REDUCERS ✅

Redux Actions Payloads of information that send data from your
application to the store. const action = { type: "ADD_TODO", payload: { name: "A new todo" } }; store.dispatch(action);

Redux Action Creators function renameTodo(index, name) { } return {
type: "RENAME_TODO", payload: { index, name } };

type: "RENAME_TODO", payload: { index, name } }; ACTION CREATOR

type: "RENAME_TODO", payload: { index, name } }; ACTION

Redux Action Creators store.dispatch( renameTodo(0, 'Naming todos is hard.’) );

STORE ACTIONS REDUCERS ✅ ✅

Redux Reducers Actions describe that something happened. Reducers specify how
the state changes in response. (previous, action) => newState

Redux Reducers function reducer(state = INITIAL_STATE, { type, payload })
{ if (type === 'INCREMENT') { return state + 1; } if (type === 'INCREMENT_BY') { return state + payload; } return state; } ACTION

Redux Reducers counterReducer(0, { type: ‘INCREMENT' }); // 1

Redux Reducers counterReducer(0, { type: ‘INCREMENT' }); // 1 counterReducer(5,
{ type: ‘INCREMENT_BY', payload: 10 }); // 15

STORE ACTIONS REDUCERS ✅ ✅ ✅

Write a simple redux application and use in React, Vue
and Angular 2 without code changes. CHALLENGE #1

Store Action Reducer Component Redux Your framework

ADD Buy Groceries Go to Gym x

ADD Buy Groceries Go to Gym x Step 1: design
state

ADD Buy Groceries Go to Gym x [ { name:
'Buy Groceries', isCompleted: false }, { name: 'Go To Gym', isCompleted: true } ] Step 1: design state

Step 2: actions and action creators

// actions/index.js export const ADD_TODO = 'ADD_TODO'; export const TOGGLE_TODO
= 'TOGGLE_TODO'; export const addTodo = (name) => ({ type: ADD_TODO, payload: name }) export const toggleTodo = (index) => ({ type: TOGGLE_TODO, payload: index }); Step 2: actions and action creators

Step 3: reducer

// reducers/index.js export function todos(state = [], { type, payload
}) { if (type === ADD_TODO) { return state.concat([ { name: payload, isCompleted: false } ]); } if (type === TOGGLE_TODO) { return [ ...state.slice(0, payload - 1), { ...state[payload], isCompleted: !state[payload].isCompleted }, ...state.slice(payload + 1) ]; } return state; } Step 3: reducer

ADD Step 4: create store

import reducer from './reducers'; const store = createStore(reducer); store.subscribe(() =>
{ const todos = store.getState() // [] render(todos); }); ADD Step 4: create store

import reducer from './reducers'; const store = createStore(reducer); store.subscribe(() =>
{ const todos = store.getState() // [] render(todos); }); ADD Step 4: create store render(todos);

ADD Buy Groceries

ADD Buy Groceries store.dispatch( addTodo('Buy groceries’) );

ADD Buy Groceries store.dispatch( addTodo('Buy groceries’) ); store.dispatch( );

ADD Buy Groceries store.subscribe(() => { const todos = store.getState()
// [ // { name: 'Buy groceries', isCompleted: false } // ] render(todos); });

Go to Gym ADD Buy Groceries store.dispatch( addTodo('Go to gym’)
);

ADD Buy Groceries Go to Gym store.subscribe(() => { const
todos = store.getState() // [ // { name: 'Buy groceries', isCompleted: false } // { name: 'Go to Gym', isCompleted: false } // ] render(todos); });

ADD Buy Groceries Go to Gym x store.dispatch( toggleTodo(1) );

The missing bits const render = state => ‘html-ish’; el.addEventListener('event',
store.dispatch)

Let’s integrate it with <insert framework>

import React from 'react' import { render } from 'react-dom'
import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') )

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { }

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), });

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); Bootstrapping Framework

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); Bootstrapping Framework import React from 'react' import { render } from 'react-dom' render( document.getElementById('root') )

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); Bootstrapping Framework import React from 'react' import { render } from 'react-dom' render( document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; @NgModule({ imports: [ BrowserModule, ], bootstrap: [ ] }) export class AppModule { }

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); Bootstrapping Framework import React from 'react' import { render } from 'react-dom' render( document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; @NgModule({ imports: [ BrowserModule, ], bootstrap: [ ] }) export class AppModule { } import Vue from 'vue'; new Vue({ el: '#root', render: h => h( ), });

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import React from 'react' import { render } from 'react-dom' render( document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; @NgModule({ imports: [ BrowserModule, ], bootstrap: [ ] }) export class AppModule { } import Vue from 'vue'; new Vue({ el: '#root', render: h => h( ), }); ⛔ Bootstrapping Framework

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); Bootstrap Redux Part

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import React from 'react' import { createStore } from 'redux' import reducer from './reducers'; const store = createStore(reducer); Bootstrap Redux Part

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import React from 'react' import { createStore } from 'redux' import reducer from './reducers'; const store = createStore(reducer); import reducer from ‘./reducers'; Bootstrap Redux Part

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import React from 'react' import { createStore } from 'redux' import reducer from './reducers'; const store = createStore(reducer); import reducer from ‘./reducers'; import { createStore } from 'redux'; import reducer from './reducers'; const store = createStore(reducer); Bootstrap Redux Part

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import React from 'react' import { createStore } from 'redux' import reducer from './reducers'; const store = createStore(reducer); import reducer from ‘./reducers'; import { createStore } from 'redux'; import reducer from './reducers'; const store = createStore(reducer); Bootstrap Redux Part ✅

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); Binding Redux to Framework

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import { Provider } from 'react-redux' <Provider store={store}> </Provider>, Binding Redux to Framework

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import { Provider } from 'react-redux' <Provider store={store}> </Provider>, import { StoreModule } from '@ngrx/store'; StoreModule.provideStore(reducer) Binding Redux to Framework

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import { Provider } from 'react-redux' <Provider store={store}> </Provider>, import { StoreModule } from '@ngrx/store'; StoreModule.provideStore(reducer) Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); Binding Redux to Framework

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import { Provider } from 'react-redux' <Provider store={store}> </Provider>, import { StoreModule } from '@ngrx/store'; StoreModule.provideStore(reducer) Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); Binding Redux to Framework ⛔

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); Top Level Component

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import TodoApp from ‘./components/TodoApp’; <TodoApp /> Top Level Component

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import TodoApp from ‘./components/TodoApp’; <TodoApp /> import TodoApp from ‘./components/TodoApp'; TodoApp Top Level Component

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import TodoApp from ‘./components/TodoApp'; const store = createStore(reducer); render( <Provider store={store}> <TodoApp /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import TodoApp from ‘./components/TodoApp'; @NgModule({ imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [TodoApp] }) export class AppModule { } import Vue from 'vue'; import { createStore } from 'redux'; import reducer from './reducers'; import TodoApp from './components/TodoApp'; const store = createStore(reducer); Vue.use({ install: () => Object.defineProperty( Vue.proprotype, '$store', { get() { return store; }, }), }); new Vue({ el: '#root', render: h => h(TodoApp), }); import TodoApp from ‘./components/TodoApp’; <TodoApp /> import TodoApp from ‘./components/TodoApp'; TodoApp import TodoApp from './components/TodoApp'; TodoApp Top Level Component

Bootstrap ✅ ⛔ ⛔

What about TodoApp.{jsx,ts,vue}

import React, { Component } from 'react'; import { connect
} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import React, { Component } from 'react'; import { connect } from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp );

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } import React, { Component } from 'react'; import { connect } from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } }

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> import React, { Component } from 'react'; import { connect } from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script>

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> Component Deﬁnition

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> import React, { Component } from 'react'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> </div> export default ( TodoApp ); Component Deﬁnition

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> import React, { Component } from 'react'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> </div> export default ( TodoApp ); import { Component } from '@angular/core'; @Component({ selector: 'app-board', template: ` <div> </div>` }) export class BoardComponent { constructor( ){ } } Component Deﬁnition

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> import React, { Component } from 'react'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> </div> export default ( TodoApp ); import { Component } from '@angular/core'; @Component({ selector: 'app-board', template: ` <div> </div>` }) export class BoardComponent { constructor( ){ } } <template> <div> </div> </template> <script> export default { }; </script> Component Deﬁnition

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> import React, { Component } from 'react'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> </div> export default ( TodoApp ); import { Component } from '@angular/core'; @Component({ selector: 'app-board', template: ` <div> </div>` }) export class BoardComponent { constructor( ){ } } <template> <div> </div> </template> <script> export default { }; </script> Component Deﬁnition ⛔

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> Binding Redux to Component

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> import { connect } from 'react-redux'; import * as actions from '../actions'; export default connect(state => state, actions)( ); Binding Redux to Component

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> import { connect } from 'react-redux'; import * as actions from '../actions'; export default connect(state => state, actions)( ); import { Store } from '@ngrx/store'; import * as actions from '../actions'; store: Store<any> this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } Binding Redux to Component

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> import { connect } from 'react-redux'; import * as actions from '../actions'; export default connect(state => state, actions)( ); import { Store } from '@ngrx/store'; import * as actions from '../actions'; store: Store<any> this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } import * as actions from "../../common/actions"; import { connect } from "../store"; mixins: [connect(state => state, actions)] Binding Redux to Component

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> import { connect } from 'react-redux'; import * as actions from '../actions'; export default connect(state => state, actions)( ); import { Store } from '@ngrx/store'; import * as actions from '../actions'; store: Store<any> this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } import * as actions from "../../common/actions"; import { connect } from "../store"; mixins: [connect(state => state, actions)] Binding Redux to Component ⛔

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> Component “Template”

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> Component “Template”

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` Component “Template”

} from 'react-redux'; import * as actions from '../actions'; const TodoApp = ({ todos, addTodo, toggleTodo }) => <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> export default connect(state => state, actions)( TodoApp ); import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import * as actions from '../actions'; @Component({ selector: 'app-board', template: ` <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` }) export class BoardComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => { this.todos = state.todos; }) } } <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> <script> import * as actions from "../../common/actions"; import { connect } from "../store"; export default { mixins: [connect(state => state, actions)] }; </script> <div> {todos.map(({ name, isCompleted }, index) => <label key={i}> <input type="checkbox" checked={isCompleted} onChange={() => toggleTodo(index)} /> { name } </label> )} <input type="text" onChange={evt => addTodo(evt.target.value)} /> </div> <div> <label *ngFor="let todo of todos;"> <input type="checkbox" [checked]="todo.isCompleted" (change)="store.dispatch( actions.toggleTodo(index) )" /> {{ todo.name }} </label> <input type="text" (change)="store.dispatch( actions.addTodo($event.target.value) )" /> </div>` <template> <div> <label v-for="(todo, index) in todos" :key="index"> <input type="checkbox" :checked="todo.isCompleted" @change="() => toggleTodo(index)" /> {{ todo.name }} </label> <input type="text" @change="(evt) => addTodo(evt.target.value)" /> </div> </template> Component “Template”

Agnostic Components ⛔

We can do BETTER.

Write a trello clone redux application and use in React,
Vue and Angular 2 without code changes. CHALLENGE #2

const columnsState = { "dd933cd3-842f-4546-b2b2-94851eb2e89c": { index: 0, name: "todo"
}, "f9c9e0ff-6f54-4787-bbb4-b467318fffc7": { index: 1, name: "doing" }, "d8ee1c37-7c21-4754-9ebc-1c73b3eb3a8d": { index: 2, name: "done" } }; Step 1: design state

{ "47749e5": { name: "Todo" }, "dde4872": { name: "Doing"
}, "ac32fcc": { name: "Done" } } Normalized State

}, "ac32fcc": { name: "Done" } } Normalized State const arrayfyObject = obj => Object .keys(obj) .map(id => ({ ...obj[id], id })); A simple selector

}, "ac32fcc": { name: "Done" } } [ { id: "47749e5", name: "Todo" }, { id: "dde4872", name: "Doing" }, { id: "ac32fcc", name: "Done" } ] Normalized State De-Normalized State const arrayfyObject = obj => Object .keys(obj) .map(id => ({ ...obj[id], id })); A simple selector

const tasksState = { "542e1d5b-db3a-4910-a103-78b55488198c": { column: "dd933cd3-842f-4546-b2b2-94851eb2e89c", assignee: null,
name: "task 1" }, "33255381-182d-4183-b5b7-b7cfd409f583": { column: "f9c9e0ff-6f54-4787-bbb4-b467318fffc7", assignee: null, name: "task 2" } }; Step 1: design state

const tasksState = { "542e1d5b-db3a-4910-a103-78b55488198c": { column: "dd933cd3-842f-4546-b2b2-94851eb2e89c", assignee: null,
name: "task 1" }, "33255381-182d-4183-b5b7-b7cfd409f583": { column: "f9c9e0ff-6f54-4787-bbb4-b467318fffc7", assignee: null, name: "task 2" } }; Step 1: design state column: "dd933cd3-842f-4546-b2b2-94851eb2e89c" column: “f9c9e0ff-6f54-4787-bbb4-b467318fffc7" };

Step 2: actions // actions/columns.js export const RENAME_COLUMUN = "RENAME_COLUMUN";
export const renameColumn = (id, name) => ({ type: RENAME_COLUMUN, payload: { id, name } });

// actions/tasks.js export const ADD_TASK_TO_COLUMN = "ADD_TASK_TO_COLUMN"; export const addTaskToColumn
= (columnId, userId) => ({ type: ADD_TASK_TO_COLUMN, payload: { columnId, userId } }); Step 2: actions

Step 3: reducers // reducers/columns.js export default function columns(state =
{}, { type, payload }) { if (type === RENAME_COLUMUN) { return { ...state, [payload.id]: { ...state[payload.id], name: payload.name } }; } return state; }

columns( kanbanState, renameColumn("ac32fcc", "Shipped"));

}, "ac32fcc": { name: "Done" } } columns( kanbanState, renameColumn("ac32fcc", "Shipped")); { "47749e5": { name: "Todo" }, "dde4872": { name: "Doing" }, "ac32fcc": { name: "Done" } }

}, "ac32fcc": { name: "Done" } } columns( kanbanState, renameColumn("ac32fcc", "Shipped")); "ac32fcc": { name: "Done" }

}, "ac32fcc": { name: “Shipped" } } columns( kanbanState, renameColumn("ac32fcc", "Shipped")); "ac32fcc": { name: “Shipped" } { "47749e5": { name: "Todo" }, "dde4872": { name: "Doing" }, "ac32fcc": { name: "Done" } } "ac32fcc": { name: "Done" }

// reducers/tasks.js export default function tasks(state = {}, { type,
payload }) { if (type === ADD_TASK_TO_COLUMN) { return { ...state, [v4()]: { column: payload.columnId } }; } return state; } Step 3: reducers

Step 3: combining reducers

// reducers/index.ks import columns from "./columns"; import tasks from "./tasks";
import users from "./users"; const rootReducer = combineReducers({ columns, tasks, users }); Step 3: combining reducers

Step 3: combining reducers { columns: { '1': { name:
'Todo' }, '2': { name: 'Doing' }, '3', { name: 'Done' } }, tasks: { '1': { name: 'Task 1', column: '1' }, '2': { name: 'Task 2', column: '2' } } } { columns: { }, tasks: { }

getColumnsWithTasks(state);

getColumnsWithTasks(state); { columns: { '1': { name: 'Todo' }, '2':
{ name: 'Doing' }, '3', { name: 'Done' } }, tasks: { '1': { name: 'Task 1', column: '1' }, '2': { name: 'Task 2', column: '2' } } } columns: tasks:

getColumnsWithTasks(state); [ { name: "todo", id: '1', tasks: [ {
name: "Task 1", id: '1' } ] }, { name: "doing", id: '2', tasks: [ { name: "Task 2", id: '2' } ] }, { name: "done", id: '3', tasks: [] } ]; { columns: { '1': { name: 'Todo' }, '2': { name: 'Doing' }, '3', { name: 'Done' } }, tasks: { '1': { name: 'Task 1', column: '1' }, '2': { name: 'Task 2', column: '2' } } } columns: tasks: { name: "todo", id: '1', tasks: [ { name: "Task 1", id: '1' } ] }

Presentational Components Container Components Presentational and Container Components by Dan
Abramov

Presentational Components Container Components concern how things look how things
work Presentational and Container Components by Dan Abramov

work dependencies — actions and store Presentational and Container Components by Dan Abramov

work dependencies — actions and store business logic — - Presentational and Container Components by Dan Abramov

work dependencies — actions and store business logic — (redux) Presentational and Container Components by Dan Abramov visual interaction

Presentational Component

export default const Column = ({ name, onAddTask }) =>
<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> Presentational Component export default const Column = ({ name, onAddTask }) => <div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div>

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } Presentational Component export default const Column = ({ name, onAddTask }) => <div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); }

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component export default const Column = ({ name, onAddTask }) => <div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script>

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Structure

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Structure export default const Column = ({ }) => <div> </div>

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Structure export default const Column = ({ }) => <div> </div> @Component({ selector: 'column', template: ` <div> </div>` }) export class ColumnComponent { }

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Structure export default const Column = ({ }) => <div> </div> @Component({ selector: 'column', template: ` <div> </div>` }) export class ColumnComponent { } <template> <div> </div> </template> <script> export default { } </script>

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Inputs/Outputs

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Inputs/Outputs name, onAddTask

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Inputs/Outputs name, onAddTask @Input() name; @Output() onAddTask = new EventEmitter();

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Inputs/Outputs name, onAddTask @Input() name; @Output() onAddTask = new EventEmitter(); props: ['name', 'onAddTask'],

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Inputs/Outputs name, onAddTask @Input() name; @Output() onAddTask = new EventEmitter(); props: ['name', 'onAddTask'], ✅

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Binding inputs

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Binding inputs <span>{name}</span>

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Binding inputs <span>{name}</span> <span>{{ name }}</span>

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Binding inputs <span>{name}</span> <span>{{ name }}</span> <span>{{ name }}</span>

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Binding inputs <span>{name}</span> <span>{{ name }}</span> <span>{{ name }}</span> ✅

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Emitting outputs + +

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Emitting outputs onClick={onAddTask}>

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Emitting outputs onClick={onAddTask}> (click)="onAddTask.emit()">

<div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() name; @Output() onAddTask = new EventEmitter(); } <template> <div> <span>{{ name }}</span> <button @click=“onAddTask"> Add Task </button> </div> </template> <script> export default { props: ['name', 'onAddTask'], } </script> Presentational Component: Emitting outputs onClick={onAddTask}> (click)="onAddTask.emit()"> @click=“onAddTask">

Presentational Component ✅ ✅

Container Component

Container Component import { connect } from "react-redux"; import *
as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); import { connect } from "react-redux"; import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello);

as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } } import { connect } from "react-redux"; import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } }

as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); <template> <board> <column v-for="(column, index) in state.columns" :key="column.id" :name="column.name" @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> <task v-for="task in column.tasks" :key="`task-${task.id}`" :name="task.name"/> </column> </board> </template> <script> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; import { connect } from "../store"; export default { mixins: [connect( state => ({ columns: getColumnsWithTasks(state) }). actions )] }; </script> import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } } import { connect } from "react-redux"; import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); <template> <board> <column v-for="(column, index) in state.columns" :key="column.id" :name="column.name" @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> <task v-for="task in column.tasks" :key="`task-${task.id}`" :name="task.name"/> </column> </board> </template> <script> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; import { connect } from "../store"; export default { mixins: [connect( state => ({ columns: getColumnsWithTasks(state) }). actions )] }; </script> import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } }

Container Component: Redux bindings import { connect } from "react-redux";
import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); <template> <board> <column v-for="(column, index) in state.columns" :key="column.id" :name="column.name" @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> <task v-for="task in column.tasks" :key="`task-${task.id}`" :name="task.name"/> </column> </board> </template> <script> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; import { connect } from "../store"; export default { mixins: [connect( state => ({ columns: getColumnsWithTasks(state) }). actions )] }; </script> import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } }

import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); <template> <board> <column v-for="(column, index) in state.columns" :key="column.id" :name="column.name" @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> <task v-for="task in column.tasks" :key="`task-${task.id}`" :name="task.name"/> </column> </board> </template> <script> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; import { connect } from "../store"; export default { mixins: [connect( state => ({ columns: getColumnsWithTasks(state) }). actions )] }; </script> import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } } import { connect } from "react-redux"; export default connect( )( );

import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); <template> <board> <column v-for="(column, index) in state.columns" :key="column.id" :name="column.name" @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> <task v-for="task in column.tasks" :key="`task-${task.id}`" :name="task.name"/> </column> </board> </template> <script> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; import { connect } from "../store"; export default { mixins: [connect( state => ({ columns: getColumnsWithTasks(state) }). actions )] }; </script> import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } } import { connect } from "react-redux"; export default connect( )( ); store: Store<any> this.store = store; this.actions = actions; store.subscribe(state => { });

import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); <template> <board> <column v-for="(column, index) in state.columns" :key="column.id" :name="column.name" @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> <task v-for="task in column.tasks" :key="`task-${task.id}`" :name="task.name"/> </column> </board> </template> <script> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; import { connect } from "../store"; export default { mixins: [connect( state => ({ columns: getColumnsWithTasks(state) }). actions )] }; </script> import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } } import { connect } from "react-redux"; export default connect( )( ); import { connect } from "../store"; export default { mixins: [connect( )] }; store: Store<any> this.store = store; this.actions = actions; store.subscribe(state => { });

import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); <template> <board> <column v-for="(column, index) in state.columns" :key="column.id" :name="column.name" @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> <task v-for="task in column.tasks" :key="`task-${task.id}`" :name="task.name"/> </column> </board> </template> <script> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; import { connect } from "../store"; export default { mixins: [connect( state => ({ columns: getColumnsWithTasks(state) }). actions )] }; </script> import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } } import { connect } from "react-redux"; export default connect( )( ); import { connect } from "../store"; export default { mixins: [connect( )] }; store: Store<any> this.store = store; this.actions = actions; store.subscribe(state => { }); ⛔

Container Component: Behaviour import { connect } from "react-redux"; import
* as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); <template> <board> <column v-for="(column, index) in state.columns" :key="column.id" :name="column.name" @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> <task v-for="task in column.tasks" :key="`task-${task.id}`" :name="task.name"/> </column> </board> </template> <script> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; import { connect } from "../store"; export default { mixins: [connect( state => ({ columns: getColumnsWithTasks(state) }). actions )] }; </script> import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } }

* as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); <template> <board> <column v-for="(column, index) in state.columns" :key="column.id" :name="column.name" @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> <task v-for="task in column.tasks" :key="`task-${task.id}`" :name="task.name"/> </column> </board> </template> <script> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; import { connect } from "../store"; export default { mixins: [connect( state => ({ columns: getColumnsWithTasks(state) }). actions )] }; </script> import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } } import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} state => ({ columns: getColumnsWithTasks(state) }), actions

* as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); <template> <board> <column v-for="(column, index) in state.columns" :key="column.id" :name="column.name" @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> <task v-for="task in column.tasks" :key="`task-${task.id}`" :name="task.name"/> </column> </board> </template> <script> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; import { connect } from "../store"; export default { mixins: [connect( state => ({ columns: getColumnsWithTasks(state) }). actions )] }; </script> import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } } import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} state => ({ columns: getColumnsWithTasks(state) }), actions import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); });

* as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; const Trello = ({ columns, renameColumn, addTaskToColumn }) => ( <Board> {columns.map(({ id, name, tasks }, index) => ( <Column key={id} name={name} onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} > {tasks.map(({ id: tId, ...rest }) => ( <Task {...rest} key={`task-${tId}`} /> ))} </Column> ))} </Board> ); export default connect( state => ({ columns: getColumnsWithTasks(state) }), actions )(Trello); <template> <board> <column v-for="(column, index) in state.columns" :key="column.id" :name="column.name" @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> <task v-for="task in column.tasks" :key="`task-${task.id}`" :name="task.name"/> </column> </board> </template> <script> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; import { connect } from "../store"; export default { mixins: [connect( state => ({ columns: getColumnsWithTasks(state) }). actions )] }; </script> import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; @Component({ selector: "app-board", template: ` <board> <column *ngFor="let column of columns" [name]="column.name" (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> <task *ngFor="let t of column.tasks" [name]="t.name"></task> </column> </board> ` }) export class BoardComponent { constructor(store: Store<any>) { this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); }); } } import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers"; onColumnNameChange={ (name) => renameColumn(id, name)} onAddTask={() => addTaskToColumn(id)} state => ({ columns: getColumnsWithTasks(state) }), actions @onColumnNameChange="(name) => renameColumn(id, name)" @onAddTask="() => addTaskToColumn(column.id)"> import * as actions from "../../common/actions"; import { getColumnsWithTasks } from "../../common/reducers"; state => ({ columns: getColumnsWithTasks(state) }). actions import * as actions from "../actions"; import { getColumnsWithTasks } from "../reducers/columns"; (onAddTask)="store.dispatch( actions.addTask(column.id) )" (onColumnNameChange)="store.dispatch( actions.renameColumn(column.id, $event.target.name) )"> this.store = store; this.actions = actions; store.subscribe(state => { this.columns = getColumnsWithTasks(state); });

Container Component ⛔

∴ The web will keep changing. and so will our
tools

tools ∴ Framework wars are only a developers problem. nobody else cares

tools ∴ Framework wars are only a developers problem. nobody else cares ∴ Framework-agnostic web applications helps us make peace both. redux is a good ally in this journey

Thank you.

Framework-Agnostic Web Applications with Redux at Frontend Conf 2017

Framework-Agnostic Web Applications with Redux at Frontend Conf 2017

More Decks by João Figueiredo

Other Decks in Programming

Featured

Transcript