MIXING REASONML INTO YOUR REACT APPS ROBBIE MCCORKELL @robbiemccorkell 

No content

FEATURES ▸ Functional let increment x => x + 1; let double x => x + x; let eleven = increment (double 5); ▸ Strong inferred type system let myInt = 5; let myTypedInt : int = 5; /* Same types */ ▸ Algebraic data types type myResponseVariant = | Yes | No | PrettyMuch; let areYouCrushingIt = Yes; ▸ Pattern matching let message = switch areYouCrushingIt { | No => "No worries. Keep going!" | Yes => "Great!" | PrettyMuch => "Nice!" }; /* message is "Great!" */ 

No content

hacker-news hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

➜ hacker-news git:(master) yarn add --dev bs-platform …… ➜ hacker-news git:(master) yarn add reason-react 

hacker-news hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

hacker-news hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

bsconfig.json { "name": "hacker-news", "reason": { "react-jsx": 2 }, "package-specs": ["commonjs", "es6"], "bsc-flags": [ "-bs-super-errors" ], "bs-dependencies": [ "reason-react", "bs-jest", "bs-enzyme" ], "sources": "src" } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

package.json { "name": “hacker-news”, "private": true, "version": "0.1.0", "description": "", "main": “./src/index.js”, "scripts": { "test": "jest", "lint": "eslint --cache .", "start": "webpack -w", "watch": "bsb -make-world -w", "build": "bsb -make-world && yarn webpack", "clean": "bsb -clean-world", }, …… 1 2 3 4 5 6 7 8 9 10 11 12 13 14 … hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

index.js import ReactDOM from 'react-dom'; import React from 'react'; import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import { Provider } from 'react-redux'; import rootReducer from ‘./reducer.js'; import App from './app'; const store = createStore(rootReducer, applyMiddleware(thunk)); ReactDOM.render( , document.getElementById('index'), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

actions.js import { getTopStories as getApiTopStories } from './api'; export const RECEIVE_TOP_STORIES = 'RECEIVE_TOP_STORIES'; export const REQUEST_TOP_STORIES = 'REQUEST_TOP_STORIES'; export const requestTopStories = () => ({ type: REQUEST_TOP_STORIES, payload: {}, }); export const receiveTopStories = stories => ({ type: RECEIVE_TOP_STORIES, payload: { stories, }, }); export const getTopStories = () => async (dispatch) => { await dispatch(requestTopStories()); const topStories = await getApiTopStories(); return dispatch(receiveTopStories(topStories)); }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

reducer.js import { RECEIVE_TOP_STORIES, REQUEST_TOP_STORIES } from './actions'; const initialState = { stories: [], loaded: false, }; export default (state, action) => { if (typeof state === 'undefined') { return initialState; } switch (action.type) { case REQUEST_TOP_STORIES: return { ...state, loaded: false, }; case RECEIVE_TOP_STORIES: return { ...state, stories: action.payload.stories, loaded: true, }; default: return state; } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

reducer.js import { RECEIVE_TOP_STORIES, REQUEST_TOP_STORIES } from './actions'; const initialState = { stories: [], loaded: false, }; export default (state, action) => { if (typeof state === 'undefined') { return initialState; } switch (action.type) { case REQUEST_TOP_STORIES: return { ...state, loaded: false, }; case RECEIVE_TOP_STORIES: return { ...state, stories: action.payload.stories, loaded: true, }; default: return state; } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

reducer.re let initialState = {stories: [], loaded: false}; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 reducer.js 

reducer.re type story = { id: int, title: string, url: string }; type state = {stories : list story, loaded: bool}; let initialState: state = {stories: [], loaded: false}; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // Generated by BUCKLESCRIPT VERSION 1.9.1, PLEASE EDIT WITH CARE 'use strict'; var initialState = /* record */[ /* stories : [] */0, /* loaded : false */0 ]; exports.initialState = initialState; /* No side effect */ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 reducer.js 

reducer.re type story = { id: int, title: string, url: string }; type state = {stories : list story, loaded: bool}; let initialState: state = {stories: [], loaded: false}; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // Generated by BUCKLESCRIPT VERSION 1.9.1, PLEASE EDIT WITH CARE 'use strict'; var initialState = /* record */[ /* stories : [] */0, /* loaded : false */0 ]; exports.initialState = initialState; /* No side effect */ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 reducer.js 

reducer.re type story = { id: int, title: string, url: string }; type state = Js.t {. stories : array story, loaded : Js.boolean}; let initialState: state = {"stories": [||], "loaded": Js.false_}; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // Generated by BUCKLESCRIPT VERSION 1.9.1, PLEASE EDIT WITH CARE 'use strict'; var initialState = { stories: /* array */[], loaded: false }; exports.initialState = initialState; /* initialState Not a pure module */ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 reducer.js 

reducer.js import { RECEIVE_TOP_STORIES, REQUEST_TOP_STORIES } from './actions'; const initialState = { stories: [], loaded: false, }; export default (state, action) => { if (typeof state === 'undefined') { return initialState; } switch (action.type) { case REQUEST_TOP_STORIES: return { ...state, loaded: false, }; case RECEIVE_TOP_STORIES: return { ...state, stories: action.payload.stories, loaded: true, }; default: return state; } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

reducer.re type story = { id: int, title: string, url: string }; type state = Js.t {. stories : array story, loaded : Js.boolean}; let initialState: state = {"stories": [||], "loaded": Js.false_}; let reducer state action => { }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // Generated by BUCKLESCRIPT VERSION 1.9.1, PLEASE EDIT WITH CARE 'use strict'; var initialState = { stories: /* array */[], loaded: false }; function reducer(state, action) { } exports.initialState = initialState; exports.reducer = reducer; /* initialState Not a pure module */ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 reducer.js 

reducer.re type story = { id: int, title: string, url: string }; type state = Js.t {. stories : array story, loaded : Js.boolean}; let initialState: state = {"stories": [||], "loaded": Js.false_}; let reducer state action => { switch action##_type { } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // Generated by BUCKLESCRIPT VERSION 1.9.1, PLEASE EDIT WITH CARE 'use strict'; var initialState = { stories: /* array */[], loaded: false }; function reducer(state, action) { var match = action.type; switch (match) { } } exports.initialState = initialState; exports.reducer = reducer; /* initialState Not a pure module */ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 reducer.js 

reducer.re type story = { id: int, title: string, url: string }; type state = Js.t {. stories : array story, loaded : Js.boolean}; let initialState: state = {"stories": [||], "loaded": Js.false_}; let reducer state action => { switch action##_type { | "REQUEST_TOP_STORIES" => {"stories": [||], "loaded": Js.false_} | "RECEIVE_TOP_STORIES" => {"stories": action##payload##stories, "loaded": Js.true_} } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // Generated by BUCKLESCRIPT VERSION 1.9.1, PLEASE EDIT WITH CARE 'use strict'; var initialState = { stories: /* array */[], loaded: false }; function reducer(state, action) { var match = action.type; switch (match) { case "RECEIVE_TOP_STORIES" : return { stories: action.payload.stories, loaded: true }; case "REQUEST_TOP_STORIES" : return { stories: /* array */[], loaded: false }; } } exports.initialState = initialState; exports.reducer = reducer; /* initialState Not a pure module */ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 reducer.js 

>>>> Start compiling Rebuilding since [] BSB check build spec : OK ninja.exe -C lib/bs ninja: Entering directory `lib/bs' [2/2] Building src/reducer_2.mlast.d [1/1] Building src/reducer_2.cmj Warning number 8 /Users/robbiemccorkell/Desktop/hacker-news/src/reducer_2.re 9 ! let initialState: state = {"stories": [||], "loaded": Js.false_}; 10 ! 11 ! let reducer state action => { 12 ! switch action##_type { 13 ! | "REQUEST_TOP_STORIES" => {"stories": [||], "loaded": Js.false_} 14 ! | "RECEIVE_TOP_STORIES" => {"stories": action##payload##stories, " loaded": Js.true_} 15 ! } 16 ! }; You forgot to handle a possible value here, for example: "" 

reducer.re type story = { id: int, title: string, url: string }; type state = Js.t {. stories : array story, loaded : Js.boolean}; let initialState: state = {"stories": [||], "loaded": Js.false_}; let reducer state action => { switch action##_type { | "REQUEST_TOP_STORIES" => {"stories": [||], "loaded": Js.false_} | "RECEIVE_TOP_STORIES" => {"stories": action##payload##stories, "loaded": Js.true_} | _ => state } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // Generated by BUCKLESCRIPT VERSION 1.9.1, PLEASE EDIT WITH CARE 'use strict'; var initialState = { stories: /* array */[], loaded: false }; function reducer(state, action) { var match = action.type; switch (match) { case "RECEIVE_TOP_STORIES" : return { stories: action.payload.stories, loaded: true }; case "REQUEST_TOP_STORIES" : return { stories: /* array */[], loaded: false }; default: return state; } } exports.initialState = initialState; exports.reducer = reducer; /* initialState Not a pure module */ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 reducer.js 

reducer.js import { RECEIVE_TOP_STORIES, REQUEST_TOP_STORIES } from './actions'; const initialState = { stories: [], loaded: false, }; export default (state, action) => { if (typeof state === 'undefined') { return initialState; } switch (action.type) { case REQUEST_TOP_STORIES: return { ...state, loaded: false, }; case RECEIVE_TOP_STORIES: return { ...state, stories: action.payload.stories, loaded: true, }; default: return state; } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

VARIANTS ▸ Variant types type myResponseVariant = | Yes | No | PrettyMuch; let areYouCrushingIt = Yes; ▸ Pattern matching let message = switch areYouCrushingIt { | No => "No worries. Keep going!” | Yes => "Great!" | PrettyMuch => "Nice!" }; /* message is "Great!" */ ▸ Data wrapping type account = | None | Instagram string | Facebook string int; let myAccount = Facebook "Josh" 26; let friendAccount = Instagram "Jenny"; ▸ Pattern matching let greeting = switch (myAccount) { | None => "Hi!" | Facebook name age => "Hi " ^ name ^ ", you're a “ ^ (string_of_int age) ^ "- year-old." | Instagram name => "Hello " ^ name ^ "!" } 

reducer.re type story = { id: int, title: string, url: string }; type state = Js.t {. stories : array story, loaded : Js.boolean}; let initialState: state = {"stories": [||], "loaded": Js.false_}; let reducer state action => { let optionState = Js.Nullable.to_opt state; switch optionState { | None => initialState | Some state => { switch action##_type { | "REQUEST_TOP_STORIES" => {"stories": [||], "loaded": Js.false_} | "RECEIVE_TOP_STORIES" => {"stories": action##payload##stories, "loaded": Js.true_} | _ => state } } }; }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 … … function reducer(state, action) { if (state == null) { return initialState; } else { var match = action.type; switch (match) { case "RECEIVE_TOP_STORIES" : return { stories: action.payload.stories, loaded: true }; case "REQUEST_TOP_STORIES" : return { stories: /* array */[], loaded: false }; default: return state; } } } exports.initialState = initialState; exports.reducer = reducer; /* initialState Not a pure module */ … … 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 reducer.js 

[2/2] Building src/reducer_2.mlast.d [1/1] Building src/reducer_2.cmj Warning number 8 /Users/robbiemccorkell/Desktop/hacker-news/src/reducer_2.re 11 ! let reducer state action => { 12 ! let optionState = Js.Nullable.to_opt state; 13 ! switch optionState { 14 ! | Some state => { 15 ! switch action##_type { 16 ! | "REQUEST_TOP_STORIES" => {"stories": [||], "loaded": Js.false_ } 17 ! | "RECEIVE_TOP_STORIES" => {"stories": action##payload##stories, "loaded": Js.true_} 18 ! | _ => state 19 ! } 20 ! } 21 ! }; 22 ! }; You forgot to handle a possible value here, for example: None 

reducer.re type story = { id: int, title: string, url: string }; type state = Js.t {. stories : array story, loaded : Js.boolean}; let initialState: state = {"stories": [||], "loaded": Js.false_}; let reducer state action => { let optionState = Js.Nullable.to_opt state; switch optionState { | None => initialState | Some state => { switch action##_type { | "REQUEST_TOP_STORIES" => {"stories": [||], "loaded": Js.false_} | "RECEIVE_TOP_STORIES" => {"stories": action##payload##stories, "loaded": Js.true_} | _ => state } } }; }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 … … function reducer(state, action) { if (state == null) { return initialState; } else { var match = action.type; switch (match) { case "RECEIVE_TOP_STORIES" : return { stories: action.payload.stories, loaded: true }; case "REQUEST_TOP_STORIES" : return { stories: /* array */[], loaded: false }; default: return state; } } } exports.initialState = initialState; exports.reducer = reducer; /* initialState Not a pure module */ … … 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 reducer.js 

actions_re.re type actionType = | ReceiveTopStories | RequestTopStories | Other string; let decodeActionType = fun | "RECEIVE_TOP_STORIES" => ReceiveTopStories | "REQUEST_TOP_STORIES" => RequestTopStories | actionType => Other actionType; let encodeActionType = fun | ReceiveTopStories => "RECEIVE_TOP_STORIES" | RequestTopStories => "REQUEST_TOP_STORIES" | Other actionType => actionType; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 src/ |— app/ | |— component.js | |— index.js |— actions.js |— actions_re.js |— api.js |— header.re |— index.html |— index.js |— reducer.js 

reducer.re open Actions_re; type story = { id: int, title: string, url: string }; type state = Js.t {. stories : array story, loaded : Js.boolean}; let initialState: state = {"stories": [||], "loaded": Js.false_}; let reducer state action => { let optionState = Js.Nullable.to_opt state; let actionType = decodeActionType action##_type; switch optionState { | None => initialState | Some state => switch actionType { | RequestTopStories => {"stories": [||], "loaded": Js.false_} | ReceiveTopStories => {"stories": action##payload##stories, "loaded": Js.true_} | Other _ => state } } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // Generated by BUCKLESCRIPT VERSION 1.9.2, PLEASE EDIT WITH CARE 'use strict'; var Actions_re = require("./actions_re.js"); var initialState = { stories: /* array */[], loaded: false }; function reducer(state, action) { var actionType = Actions_re.decodeActionType(action.type); if (state == null) { return initialState; } else if (typeof actionType === "number") { if (actionType !== 0) { return { stories: /* array */[], loaded: false }; } else { return { stories: action.payload.stories, loaded: true }; } } else { return state; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 reducer.js 

Warning number 8 /Users/robbiemccorkell/Desktop/hacker-news/src/reducer.re 17 ! | None => initialState 18 ! | Some state => 19 ! switch actionType { 20 ! | ReceiveTopStories => {"stories": action##payload##stories, "load ed": Js.true_} 21 ! | Other _ => state 22 ! } 23 ! } 24 ! }; You forgot to handle a possible value here, for example: RequestTopStories >>>> Finish compiling >>>> Start compiling Rebuilding since [ [ 'change', 'reducer.re' ] ] BSB check build spec : OK ninja.exe -C lib/bs ninja: Entering directory `lib/bs' ninja: no work to do. >>>> Finish compiling 

reducer.re open Actions_re; type story = { id: int, title: string, url: string }; type state = Js.t {. stories : array story, loaded : Js.boolean}; let initialState: state = {"stories": [||], "loaded": Js.false_}; let reducer state action => { let optionState = Js.Nullable.to_opt state; let actionType = decodeActionType action##_type; switch (optionState, actionType) { | (Some _, ReceiveTopStories) => {"stories": action##payload##stories, "loaded": Js.true_} | (Some _, RequestTopStories) => {"stories": [||], "loaded": Js.false_} | (Some state, Other _) => state | (None, _) => initialState } }; let default = reducer; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 src/ |— app/ | |— component.js | |— index.js |— actions.js |— actions_re.re |— api.js |— header.re |— index.html |— index.js |— reducer.re 

index.js import ReactDOM from 'react-dom'; import React from 'react'; import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import { Provider } from 'react-redux'; import rootReducer from '../lib/js/src/reducer.js'; import App from './app'; const store = createStore(rootReducer, applyMiddleware(thunk)); ReactDOM.render( , document.getElementById('index'), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 hacker-news/ |— bundledOutputs/ |— lib/ | |— js/ | | |— src/ | | | |— header.js | | | |— reducer.js |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.re |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const webpack = require('webpack'); module.exports = { entry: ['babel-polyfill', './src/index.js'], output: { path: path.join(__dirname, 'bundledOutputs'), filename: '[name].js', }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.(re|ml)$/, use: { loader: 'bs-loader', options: { module: 'es6', }, }, }, ], }, resolve: { extensions: ['.re', '.ml', '.js'], }, ... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 … hacker-news/ |— bundledOutputs/ |— lib/ |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.js |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

index.js import ReactDOM from 'react-dom'; import React from 'react'; import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import { Provider } from 'react-redux'; import rootReducer from ‘./reducer.re’; import App from './app'; const store = createStore(rootReducer, applyMiddleware(thunk)); ReactDOM.render( , document.getElementById('index'), ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 hacker-news/ |— bundledOutputs/ |— lib/ | |— js/ | | |— src/ | | | |— header.js | | | |— reducer.js |— node_modules/ |— src/ | |— app/ | | |— component.js | | |— index.js | |— actions.js | |— api.js | |— header.re | |— index.html | |— index.js | |— reducer.re |— .babelrc |— bsconfig.json |— package.json |— README.md |— webpack.config.js 

WHAT HAVE WE GAINED? ▸ It’s hard to mess up our state shape This is: state (defined as Js.t {. loaded : Js.boolean, stories : array story }) But somewhere wanted: Js.t {. loaded : Js.boolean, stories : list 'a } Types for method stories are incompatible ▸ It’s hard to forget to handle actions You forgot to handle a possible value here, for example: RequestTopStories ▸ It’s hard to forget to handle edge cases You forgot to handle a possible value here, for example: None 

NOT COVERED ▸ Reason React API! let component = ReasonReact.statelessComponent "Header"; let make children => { ...component, render: fun _self => }; ▸ Importing JS into Reason external getElementsByClassName : string => array Dom.element = "document.getElementsByClassName" [@@bs.val]; 

github.com/robbiemccorkell/reason-interop @robbiemccorkell #reasonml