Redux Example using React

A simple TODO application from Dan Abramov's tutorials. You can click on a TODO to mark it complete and vice versa. Note: You can also filter Completed/Incompleted/All TODOs.

by dingen2010

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script>
<!-- Sample by @SheerPace170 -->
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="root"></div>

JavaScript 1.7

// Router
const Router = createFarceRouter({
  historyProtocol: new BrowserProtocol(),
  historyMiddlewares: [queryMiddleware],
  routeConfig: routes,

  render: createRender({}),
});

// Redux
const store = createStore(
  rootReducer,
  compose (
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && 
window.__REDUX_DEVTOOLS_EXTENSION__()
 )
);

// Render component into DOM element.
const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <Router resolver={new Resolver(environment)} />
      </Provider>
    </AppContainer>,
    document.getElementById('root')
  )
}


export function showDropdown() { 
  return {  
    type: SHOW_DROPDOWN,
    dropdownType: PROFILE_SETTINGS,
    dropdownProps: {}
  }                                                                                                              
 }


import React from 'react';
import { connect } from 'react-redux';

import { showDropdown } from '../../redux/actions/dropdownActions';

function StreamWidget() {
  const onClickHandler = () => {
  showDropdown();
}

return (
  <div>
    <a
      href='#'
      role='button'
      onClick={ onClickHandler }
    />
  </div>
);
}
export default connect(null, { showDropdown })(StreamWidget);