doomhz/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://fb.me/react-with-addons-15.1.0.js"></script>
  <script src="https://fb.me/react-dom-15.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
</head>
<body>
  <div id="app"></div>
<script id="jsbin-javascript">
// Action Types

"use strict";

var CREATE_AUTH_TOKEN = "CREATE_AUTH_TOKEN";
var DELETE_AUTH_TOKEN = "DELETE_AUTH_TOKEN";
var UPDATE_CURRENT_PROFILE = "UPDATE_CURRENT_PROFILE";

// Action Creators

var createAuthToken = function createAuthToken() {
  return { type: CREATE_AUTH_TOKEN, token: "random_secret_token" };
};

var deleteAuthToken = function deleteAuthToken() {
  return { type: DELETE_AUTH_TOKEN, token: null };
};

var updateCurrentProfile = function updateCurrentProfile(profile) {
  return { type: UPDATE_CURRENT_PROFILE, profile: profile };
};

// Reducers

var auth = function auth(state, action) {
  if (state === undefined) state = { token: null };

  switch (action.type) {
    case CREATE_AUTH_TOKEN:
      return Object.assign({}, state, { token: action.token });
    case DELETE_AUTH_TOKEN:
      return Object.assign({}, state, { token: action.token });
    default:
      return state;
  }
};

var currentProfile = function currentProfile(state, action) {
  if (state === undefined) state = {};

  if (!action.profile) return {};
  switch (action.type) {
    case UPDATE_CURRENT_PROFILE:
      return Object.assign({}, state, action.profile);
    default:
      return state;
  }
};

var authService = Redux.combineReducers({
  auth: auth,
  currentProfile: currentProfile
});

// Components

var AuthButton = function AuthButton(_ref) {
  var isLoggedIn = _ref.isLoggedIn;
  var onButtonClick = _ref.onButtonClick;

  return React.createElement(
    "button",
    { onClick: function () {
        return onButtonClick(isLoggedIn);
      } },
    isLoggedIn ? 'Log Out' : 'Log In'
  );
};

var ProfileInfo = function ProfileInfo(_ref2) {
  var profile = _ref2.profile;

  var info = profile.username ? "Welcome, " + profile.username : "";
  return React.createElement(
    "div",
    null,
    info
  );
};

// Containers

var mapStateToPropsForAuth = function mapStateToPropsForAuth(state) {
  return {
    isLoggedIn: state.auth.token !== null
  };
};
var mapDispatchToPropsForAuth = function mapDispatchToPropsForAuth(dispatch) {
  return {
    onButtonClick: function onButtonClick(isLoggedIn) {
      if (!isLoggedIn) {
        dispatch(createAuthToken());
        dispatch(updateCurrentProfile({
          id: 1,
          username: "john"
        }));
        return;
      }
      dispatch(deleteAuthToken());
      dispatch(updateCurrentProfile({}));
    }
  };
};
var LoginButton = ReactRedux.connect(mapStateToPropsForAuth, mapDispatchToPropsForAuth)(AuthButton);

var mapStateToPropsForCurrentProfile = function mapStateToPropsForCurrentProfile(state) {
  return {
    profile: state.currentProfile
  };
};
var CurrentProfileInfo = ReactRedux.connect(mapStateToPropsForCurrentProfile)(ProfileInfo);

// Store

var store = Redux.createStore(authService);
var Provider = ReactRedux.Provider;

// Code

console.log(store.getState());
unsubscribe = store.subscribe(function () {
  console.log(store.getState());
});
// unsubscribe()

ReactDOM.render(React.createElement(
  Provider,
  { store: store },
  React.createElement(
    "div",
    null,
    React.createElement(CurrentProfileInfo, null),
    React.createElement(LoginButton, null)
  )
), document.getElementById('app'));
</script>


<script id="jsbin-source-javascript" type="text/javascript">// Action Types

const CREATE_AUTH_TOKEN = "CREATE_AUTH_TOKEN"
const DELETE_AUTH_TOKEN = "DELETE_AUTH_TOKEN"
const UPDATE_CURRENT_PROFILE = "UPDATE_CURRENT_PROFILE"


// Action Creators

const createAuthToken = ()=> {
  return {type: CREATE_AUTH_TOKEN, token: "random_secret_token"}
}

const deleteAuthToken = ()=> {
  return {type: DELETE_AUTH_TOKEN, token: null}
}

const updateCurrentProfile = (profile)=> {
  return {type: UPDATE_CURRENT_PROFILE, profile: profile}
}


// Reducers

const auth = (state = {token: null}, action)=> {
  switch (action.type) {
    case CREATE_AUTH_TOKEN:
      return Object.assign({}, state, {token: action.token})
    case DELETE_AUTH_TOKEN:
      return Object.assign({}, state, {token: action.token})
    default:
      return state
  }
}

const currentProfile = (state = {}, action)=> {
  if (!action.profile) return {}
  switch (action.type) {
    case UPDATE_CURRENT_PROFILE:
      return Object.assign({}, state, action.profile)
    default:
      return state
  }
}

let authService = Redux.combineReducers({
  auth: auth,
  currentProfile: currentProfile
})


// Components

const AuthButton = ({isLoggedIn, onButtonClick})=> {
  return (
    <button onClick={() => onButtonClick(isLoggedIn)}>{isLoggedIn ? 'Log Out' : 'Log In'}</button>
  )
}

const ProfileInfo = ({profile})=> {
  let info = profile.username ? "Welcome, " + profile.username : ""
  return (
    <div>{info}</div>
  )
}


// Containers

const mapStateToPropsForAuth = (state)=> {
  return {
    isLoggedIn: state.auth.token !== null
  }
}
const mapDispatchToPropsForAuth = (dispatch)=> {
  return {
    onButtonClick: (isLoggedIn)=> {
      if (!isLoggedIn) {
        dispatch(createAuthToken())
        dispatch(updateCurrentProfile({
          id: 1,
          username: "john"
        }))
        return
      }
      dispatch(deleteAuthToken())
      dispatch(updateCurrentProfile({}))
    }
  }
}
const LoginButton = ReactRedux.connect(
  mapStateToPropsForAuth,
  mapDispatchToPropsForAuth
)(AuthButton)

const mapStateToPropsForCurrentProfile = (state)=> {
  return {
    profile: state.currentProfile
  }
}
const CurrentProfileInfo = ReactRedux.connect(
  mapStateToPropsForCurrentProfile
)(ProfileInfo)


// Store

let store = Redux.createStore(authService)
let Provider = ReactRedux.Provider


// Code

console.log(store.getState())
unsubscribe = store.subscribe(() => {
  console.log(store.getState())
})
// unsubscribe()

ReactDOM.render(
  <Provider store={store}>
    <div>
      <CurrentProfileInfo />
      <LoginButton />
    </div>
  </Provider>,
  document.getElementById('app')
)


</script></body>
</html>

## jsbin.fowacudise.js
// Action Types

"use strict";

var CREATE_AUTH_TOKEN = "CREATE_AUTH_TOKEN";
var DELETE_AUTH_TOKEN = "DELETE_AUTH_TOKEN";
var UPDATE_CURRENT_PROFILE = "UPDATE_CURRENT_PROFILE";

// Action Creators

var createAuthToken = function createAuthToken() {
  return { type: CREATE_AUTH_TOKEN, token: "random_secret_token" };
};

var deleteAuthToken = function deleteAuthToken() {
  return { type: DELETE_AUTH_TOKEN, token: null };
};

var updateCurrentProfile = function updateCurrentProfile(profile) {
  return { type: UPDATE_CURRENT_PROFILE, profile: profile };
};

// Reducers

var auth = function auth(state, action) {
  if (state === undefined) state = { token: null };

  switch (action.type) {
    case CREATE_AUTH_TOKEN:
      return Object.assign({}, state, { token: action.token });
    case DELETE_AUTH_TOKEN:
      return Object.assign({}, state, { token: action.token });
    default:
      return state;
  }
};

var currentProfile = function currentProfile(state, action) {
  if (state === undefined) state = {};

  if (!action.profile) return {};
  switch (action.type) {
    case UPDATE_CURRENT_PROFILE:
      return Object.assign({}, state, action.profile);
    default:
      return state;
  }
};

var authService = Redux.combineReducers({
  auth: auth,
  currentProfile: currentProfile
});

// Components

var AuthButton = function AuthButton(_ref) {
  var isLoggedIn = _ref.isLoggedIn;
  var onButtonClick = _ref.onButtonClick;

  return React.createElement(
    "button",
    { onClick: function () {
        return onButtonClick(isLoggedIn);
      } },
    isLoggedIn ? 'Log Out' : 'Log In'
  );
};

var ProfileInfo = function ProfileInfo(_ref2) {
  var profile = _ref2.profile;

  var info = profile.username ? "Welcome, " + profile.username : "";
  return React.createElement(
    "div",
    null,
    info
  );
};

// Containers

var mapStateToPropsForAuth = function mapStateToPropsForAuth(state) {
  return {
    isLoggedIn: state.auth.token !== null
  };
};
var mapDispatchToPropsForAuth = function mapDispatchToPropsForAuth(dispatch) {
  return {
    onButtonClick: function onButtonClick(isLoggedIn) {
      if (!isLoggedIn) {
        dispatch(createAuthToken());
        dispatch(updateCurrentProfile({
          id: 1,
          username: "john"
        }));
        return;
      }
      dispatch(deleteAuthToken());
      dispatch(updateCurrentProfile({}));
    }
  };
};
var LoginButton = ReactRedux.connect(mapStateToPropsForAuth, mapDispatchToPropsForAuth)(AuthButton);

var mapStateToPropsForCurrentProfile = function mapStateToPropsForCurrentProfile(state) {
  return {
    profile: state.currentProfile
  };
};
var CurrentProfileInfo = ReactRedux.connect(mapStateToPropsForCurrentProfile)(ProfileInfo);

// Store

var store = Redux.createStore(authService);
var Provider = ReactRedux.Provider;

// Code

console.log(store.getState());
unsubscribe = store.subscribe(function () {
  console.log(store.getState());
});
// unsubscribe()

ReactDOM.render(React.createElement(
  Provider,
  { store: store },
  React.createElement(
    "div",
    null,
    React.createElement(CurrentProfileInfo, null),
    React.createElement(LoginButton, null)
  )
), document.getElementById('app'));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
	</head>
	<body>
	<div id="app"></div>
	<script id="jsbin-javascript">
	// Action Types

	"use strict";

	var CREATE_AUTH_TOKEN = "CREATE_AUTH_TOKEN";
	var DELETE_AUTH_TOKEN = "DELETE_AUTH_TOKEN";
	var UPDATE_CURRENT_PROFILE = "UPDATE_CURRENT_PROFILE";

	// Action Creators

	var createAuthToken = function createAuthToken() {
	return { type: CREATE_AUTH_TOKEN, token: "random_secret_token" };
	};

	var deleteAuthToken = function deleteAuthToken() {
	return { type: DELETE_AUTH_TOKEN, token: null };
	};

	var updateCurrentProfile = function updateCurrentProfile(profile) {
	return { type: UPDATE_CURRENT_PROFILE, profile: profile };
	};

	// Reducers

	var auth = function auth(state, action) {
	if (state === undefined) state = { token: null };

	switch (action.type) {
	case CREATE_AUTH_TOKEN:
	return Object.assign({}, state, { token: action.token });
	case DELETE_AUTH_TOKEN:
	return Object.assign({}, state, { token: action.token });
	default:
	return state;
	}
	};

	var currentProfile = function currentProfile(state, action) {
	if (state === undefined) state = {};

	if (!action.profile) return {};
	switch (action.type) {
	case UPDATE_CURRENT_PROFILE:
	return Object.assign({}, state, action.profile);
	default:
	return state;
	}
	};

	var authService = Redux.combineReducers({
	auth: auth,
	currentProfile: currentProfile
	});

	// Components

	var AuthButton = function AuthButton(_ref) {
	var isLoggedIn = _ref.isLoggedIn;
	var onButtonClick = _ref.onButtonClick;

	return React.createElement(
	"button",
	{ onClick: function () {
	return onButtonClick(isLoggedIn);
	} },
	isLoggedIn ? 'Log Out' : 'Log In'
	);
	};

	var ProfileInfo = function ProfileInfo(_ref2) {
	var profile = _ref2.profile;

	var info = profile.username ? "Welcome, " + profile.username : "";
	return React.createElement(
	"div",
	null,
	info
	);
	};

	// Containers

	var mapStateToPropsForAuth = function mapStateToPropsForAuth(state) {
	return {
	isLoggedIn: state.auth.token !== null
	};
	};
	var mapDispatchToPropsForAuth = function mapDispatchToPropsForAuth(dispatch) {
	return {
	onButtonClick: function onButtonClick(isLoggedIn) {
	if (!isLoggedIn) {
	dispatch(createAuthToken());
	dispatch(updateCurrentProfile({
	id: 1,
	username: "john"
	}));
	return;
	}
	dispatch(deleteAuthToken());
	dispatch(updateCurrentProfile({}));
	}
	};
	};
	var LoginButton = ReactRedux.connect(mapStateToPropsForAuth, mapDispatchToPropsForAuth)(AuthButton);

	var mapStateToPropsForCurrentProfile = function mapStateToPropsForCurrentProfile(state) {
	return {
	profile: state.currentProfile
	};
	};
	var CurrentProfileInfo = ReactRedux.connect(mapStateToPropsForCurrentProfile)(ProfileInfo);

	// Store

	var store = Redux.createStore(authService);
	var Provider = ReactRedux.Provider;

	// Code

	console.log(store.getState());
	unsubscribe = store.subscribe(function () {
	console.log(store.getState());
	});
	// unsubscribe()

	ReactDOM.render(React.createElement(
	Provider,
	{ store: store },
	React.createElement(
	"div",
	null,
	React.createElement(CurrentProfileInfo, null),
	React.createElement(LoginButton, null)
	)
	), document.getElementById('app'));
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">// Action Types

	const CREATE_AUTH_TOKEN = "CREATE_AUTH_TOKEN"
	const DELETE_AUTH_TOKEN = "DELETE_AUTH_TOKEN"
	const UPDATE_CURRENT_PROFILE = "UPDATE_CURRENT_PROFILE"


	// Action Creators

	const createAuthToken = ()=> {
	return {type: CREATE_AUTH_TOKEN, token: "random_secret_token"}
	}

	const deleteAuthToken = ()=> {
	return {type: DELETE_AUTH_TOKEN, token: null}
	}

	const updateCurrentProfile = (profile)=> {
	return {type: UPDATE_CURRENT_PROFILE, profile: profile}
	}


	// Reducers

	const auth = (state = {token: null}, action)=> {
	switch (action.type) {
	case CREATE_AUTH_TOKEN:
	return Object.assign({}, state, {token: action.token})
	case DELETE_AUTH_TOKEN:
	return Object.assign({}, state, {token: action.token})
	default:
	return state
	}
	}

	const currentProfile = (state = {}, action)=> {
	if (!action.profile) return {}
	switch (action.type) {
	case UPDATE_CURRENT_PROFILE:
	return Object.assign({}, state, action.profile)
	default:
	return state
	}
	}

	let authService = Redux.combineReducers({
	auth: auth,
	currentProfile: currentProfile
	})


	// Components

	const AuthButton = ({isLoggedIn, onButtonClick})=> {
	return (
	<button onClick={() => onButtonClick(isLoggedIn)}>{isLoggedIn ? 'Log Out' : 'Log In'}</button>
	)
	}

	const ProfileInfo = ({profile})=> {
	let info = profile.username ? "Welcome, " + profile.username : ""
	return (
	<div>{info}</div>
	)
	}


	// Containers

	const mapStateToPropsForAuth = (state)=> {
	return {
	isLoggedIn: state.auth.token !== null
	}
	}
	const mapDispatchToPropsForAuth = (dispatch)=> {
	return {
	onButtonClick: (isLoggedIn)=> {
	if (!isLoggedIn) {
	dispatch(createAuthToken())
	dispatch(updateCurrentProfile({
	id: 1,
	username: "john"
	}))
	return
	}
	dispatch(deleteAuthToken())
	dispatch(updateCurrentProfile({}))
	}
	}
	}
	const LoginButton = ReactRedux.connect(
	mapStateToPropsForAuth,
	mapDispatchToPropsForAuth
	)(AuthButton)

	const mapStateToPropsForCurrentProfile = (state)=> {
	return {
	profile: state.currentProfile
	}
	}
	const CurrentProfileInfo = ReactRedux.connect(
	mapStateToPropsForCurrentProfile
	)(ProfileInfo)


	// Store

	let store = Redux.createStore(authService)
	let Provider = ReactRedux.Provider


	// Code

	console.log(store.getState())
	unsubscribe = store.subscribe(() => {
	console.log(store.getState())
	})
	// unsubscribe()

	ReactDOM.render(
	<Provider store={store}>
	<div>
	<CurrentProfileInfo />
	<LoginButton />
	</div>
	</Provider>,
	document.getElementById('app')
	)




	</script></body>
	</html>