add redux-thunk slide

talk/.gitignore

@@ -0,0 +1 @@
+/node_modules

talk/Gruntfile.js

@@ -0,0 +1,192 @@
+/* global module:false */
+module.exports = function(grunt) {
+ var port = grunt.option('port') || 8000;
+ var root = grunt.option('root') || '.';
+
+ if (!Array.isArray(root)) root = [root];
+
+ // Project configuration
+ grunt.initConfig({
+ pkg: grunt.file.readJSON('package.json'),
+ meta: {
+ banner:
+ '/*!\n' +
+ ' * reveal.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' +
+ ' * http:https://revealjs.com\n' +
+ ' * MIT licensed\n' +
+ ' *\n' +
+ ' * Copyright (C) 2017 Hakim El Hattab, http:https://hakim.se\n' +
+ ' */'
+ },
+
+ qunit: {
+ files: [ 'test/*.html' ]
+ },
+
+ uglify: {
+ options: {
+ banner: '<%= meta.banner %>\n',
+ screwIE8: false
+ },
+ build: {
+ src: 'js/reveal.js',
+ dest: 'js/reveal.min.js'
+ }
+ },
+
+ sass: {
+ core: {
+ src: 'css/reveal.scss',
+ dest: 'css/reveal.css'
+ },
+ themes: {
+ expand: true,
+ cwd: 'css/theme/source',
+ src: ['*.sass', '*.scss'],
+ dest: 'css/theme',
+ ext: '.css'
+ }
+ },
+
+ autoprefixer: {
+ core: {
+ src: 'css/reveal.css'
+ }
+ },
+
+ cssmin: {
+ options: {
+ compatibility: 'ie9'
+ },
+ compress: {
+ src: 'css/reveal.css',
+ dest: 'css/reveal.min.css'
+ }
+ },
+
+ jshint: {
+ options: {
+ curly: false,
+ eqeqeq: true,
+ immed: true,
+ esnext: true,
+ latedef: 'nofunc',
+ newcap: true,
+ noarg: true,
+ sub: true,
+ undef: true,
+ eqnull: true,
+ browser: true,
+ expr: true,
+ globals: {
+ head: false,
+ module: false,
+ console: false,
+ unescape: false,
+ define: false,
+ exports: false
+ }
+ },
+ files: [ 'Gruntfile.js', 'js/reveal.js' ]
+ },
+
+ connect: {
+ server: {
+ options: {
+ port: port,
+ base: root,
+ livereload: true,
+ open: true,
+ useAvailablePort: true
+ }
+ }
+ },
+
+ zip: {
+ bundle: {
+ src: [
+ 'index.html',
+ 'css/**',
+ 'js/**',
+ 'lib/**',
+ 'images/**',
+ 'plugin/**',
+ '**.md'
+ ],
+ dest: 'reveal-js-presentation.zip'
+ }
+ },
+
+ watch: {
+ js: {
+ files: [ 'Gruntfile.js', 'js/reveal.js' ],
+ tasks: 'js'
+ },
+ theme: {
+ files: [
+ 'css/theme/source/*.sass',
+ 'css/theme/source/*.scss',
+ 'css/theme/template/*.sass',
+ 'css/theme/template/*.scss'
+ ],
+ tasks: 'css-themes'
+ },
+ css: {
+ files: [ 'css/reveal.scss' ],
+ tasks: 'css-core'
+ },
+ html: {
+ files: root.map(path => path + '/*.html')
+ },
+ markdown: {
+ files: root.map(path => path + '/*.md')
+ },
+ options: {
+ livereload: true
+ }
+ },
+
+ retire: {
+ js: [ 'js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js' ],
+ node: [ '.' ]
+ }
+
+ });
+
+ // Dependencies
+ grunt.loadNpmTasks( 'grunt-contrib-connect' );
+ grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
+ grunt.loadNpmTasks( 'grunt-contrib-jshint' );
+ grunt.loadNpmTasks( 'grunt-contrib-qunit' );
+ grunt.loadNpmTasks( 'grunt-contrib-uglify' );
+ grunt.loadNpmTasks( 'grunt-contrib-watch' );
+ grunt.loadNpmTasks( 'grunt-autoprefixer' );
+ grunt.loadNpmTasks( 'grunt-retire' );
+ grunt.loadNpmTasks( 'grunt-sass' );
+ grunt.loadNpmTasks( 'grunt-zip' );
+
+ // Default task
+ grunt.registerTask( 'default', [ 'css', 'js' ] );
+
+ // JS task
+ grunt.registerTask( 'js', [ 'jshint', 'uglify', 'qunit' ] );
+
+ // Theme CSS
+ grunt.registerTask( 'css-themes', [ 'sass:themes' ] );
+
+ // Core framework CSS
+ grunt.registerTask( 'css-core', [ 'sass:core', 'autoprefixer', 'cssmin' ] );
+
+ // All CSS
+ grunt.registerTask( 'css', [ 'sass', 'autoprefixer', 'cssmin' ] );
+
+ // Package presentation to archive
+ grunt.registerTask( 'package', [ 'default', 'zip' ] );
+
+ // Serve presentation locally
+ grunt.registerTask( 'serve', [ 'connect', 'watch' ] );
+
+ // Run tests
+ grunt.registerTask( 'test', [ 'jshint', 'qunit' ] );
+
+};

talk/bower.json

@@ -0,0 +1,27 @@
+{
+ "name": "reveal.js",
+ "version": "3.6.0",
+ "main": [
+ "js/reveal.js",
+ "css/reveal.css"
+ ],
+ "homepage": "http:https://revealjs.com",
+ "license": "MIT",
+ "description": "The HTML Presentation Framework",
+ "authors": [
+ "Hakim El Hattab <[email protected]>"
+ ],
+ "dependencies": {
+ "headjs": "~1.0.3"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git:https://github.com/hakimel/reveal.js.git"
+ },
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test"
+ ]
+}

talk/css/custom.css

@@ -14,12 +14,4 @@ section.only-image p {
  width: 100px;
  border: unset !important;
  background-color: transparent !important;
-}
-
-.reveal > .slides section.present[data-markdown-parsed=true] {
- display: flex !important;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100vh;
 }

talk/package.json

@@ -0,0 +1,43 @@
+{
+ "name": "reveal.js",
+ "version": "3.6.0",
+ "description": "The HTML Presentation Framework",
+ "homepage": "http:https://revealjs.com",
+ "subdomain": "revealjs",
+ "main": "js/reveal.js",
+ "scripts": {
+ "test": "grunt test",
+ "start": "grunt serve",
+ "build": "grunt"
+ },
+ "author": {
+ "name": "Hakim El Hattab",
+ "email": "[email protected]",
+ "web": "http:https://hakim.se"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git:https://github.com/hakimel/reveal.js.git"
+ },
+ "engines": {
+ "node": ">=4.0.0"
+ },
+ "devDependencies": {
+ "express": "^4.15.2",
+ "grunt": "^1.0.1",
+ "grunt-autoprefixer": "^3.0.4",
+ "grunt-cli": "^1.2.0",
+ "grunt-contrib-connect": "^1.0.2",
+ "grunt-contrib-cssmin": "^2.1.0",
+ "grunt-contrib-jshint": "^1.1.0",
+ "grunt-contrib-qunit": "~1.2.0",
+ "grunt-contrib-uglify": "^2.3.0",
+ "grunt-contrib-watch": "^1.0.0",
+ "grunt-sass": "^2.0.0",
+ "grunt-retire": "^1.0.7",
+ "grunt-zip": "~0.17.1",
+ "mustache": "^2.3.0",
+ "socket.io": "^1.7.3"
+ },
+ "license": "MIT"
+}

talk/resources/content.md

@@ -391,16 +391,57 @@ const reducer = (state = {}, action) {
 
 
 ~~~
-### ? tout dans le store ? Des states locaux ?
-Débat non tranché ; certains considèrent qu'il faut tout mettre dans le store pour une meilleure visibilité de l'état général de l'appli,
-d'autres considèrent qu'on ne met dans le store que ce qui va être partagé par d'autres composants...
-"Un composant vraiment autonome qu'on se verrait pousser sur github => state local"
+### global state
+###### vs
+### local (component) state
+📄 <!-- .element: class="slide-icon" -->
+Note: Débat non tranché
+##### tout mettre dans le store
+- meilleure visibilité de l'état global de l'appli,
+- possibilité d'utiliser toute la puissance de Redux (time traveling notamment)
+##### __you might not need redux__
+- on ne met dans le store que ce qui va être partagé par d'autres composants...
+- cf. talk de @MoOx
+
+~~~
+### redux-thunk
+![icon](resources/throw.png)<!-- .element: class="slide-icon" -->
+- thunk: action de type 'function' <!-- .element: class="fragment" -->
+- accès au state entier <!-- .element: class="fragment" -->
+- multiples dispatch possibles <!-- .element: class="fragment" -->
+- appels asynchrones possibles (Promise.then(dispatch).catch(dispatch)) <!-- .element: class="fragment" -->
+
+
+~~~
+### redux-thunk example
+```javascript
+function validateAndCloseForm(formValues) {
+ return (dispatch, getState) => {
+ const previousState = getState();
 
+ dispatch({ type: 'VALIDATE_FORM', formValues });
+ //dispatch is synchronous => getState() gets the new state
+ const intermediateState = getState();
 
+ dispatch({ type: 'CLOSE_FORM', id: formValues.id });
+ const finalState = getState();
+ 
+ // previousState !== intermediateState !== finalState
+ }
+}
+```
+
+~~~
+### redux devtools
+![](https://media.giphy.com/media/yPO3Yxx3jRSlG/giphy_s.gif)
+- visualisation des actions exécutées <!-- .element: class="fragment" -->
+- déclenchement d'une action à la main <!-- .element: class="fragment" -->
+- voyage dans le temps <!-- .element: class="fragment" -->
+
+Note:
+cas d'usage: un message d'info qui disparaît au bout de 3 secondes
 ~~~
 ### librairies et outils connexes
-- redux devtools et le time travelling (démo)
-- reselect
 - redux-thunk pour des actionCreators plutôt que des actions => accès au state et au dispatch
 - ? redux-saga
 - ? normalizr (pour convertir une réponse d'API par exemple, en de la donnée normalisée ?)