Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Todo App]">
  <script src="//fb.me/react-0.14.3.js"></script>
  <script src="//fb.me/react-dom-0.14.3.js"></script>
  <script src="https://wzrd.in/standalone/expect@latest"></script>
  <script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.5/redux.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.6/react-redux.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id='root'></div>
  <script type="text/babel">
  
        const { combineReducers, createStore } = Redux;
        const { Provider, connect } = ReactRedux;
        const { Component } = React; 
​
      
        //========================Reducers
​
          let items = [{
            title: 'Mad max',
            year: 2015,
            rating: 8,
            genre: 'fantasy',
          }, {
            title: 'Spider man 2',
            year: 2014,
            rating: 7,
            genre: 'fantasy',
          }, {
            title: 'Iron man 3',
            year: 2013,
            rating: 7,
            genre: 'fantasy',
          }, {
            title: 'Dumb and Dumber To',
            year: 2014,
            rating: 5,
            genre: 'comedy',
          }, {
            title: 'Ted 2',
            year: 2015,
            rating: 6,
            genre: 'comedy',
          }];
​
          const moviesReducer(state = {items}, action) {
            if(action.type === 'SET_MOVIES_FILTER') {
              return update(state.items, {$splice: [[1,3]]})
            }
              return state;
            }
​
        const FilterApp = combineReducers({moviesReducer});
​
        //=====================Components
​
             const movieTable = ({testmovie, movieTable }) => {
​
             return (
​
                <div>
                    <button onClick={movieTable}>testbutton</button> 
                    <ul>
                    {testmovie.map((m, i) =>
                <li key={i}>{m.year} - {m.title}.({m.genre}) - {m.rating}</li>
                )}
                    </ul>
                 </div> )
              }
​
          function mapStateToProps(state) {
            return {
                testmovie: state.moviesReducer.items
​
            };
          };
​
​
          const mapDispachToProps = (dispatch) => {
              return {
            movieTable: () => {dispatch (SetMoviesFilter());
                  },
              };
          };
​
​
          const AppMovie = connect(mapStateToProps, mapDispachToProps)(movieTable);
​
        
        
        //=====================Action
        
           export const SetMoviesFilter = () => {
            return {
              type: 'SET_MOVIES_FILTER'
            };
          };
        
        //=====================Client.js
        
        
        const App = () => (
        <div>
          <AppMovie />
        </div>
      );
​
        ReactDOM.render(
          <Provider store={createStore(FilterApp)}>
            <App />
          </Provider>,
          document.getElementById('root')
        );
  </script>
​
</body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
simonbretonpro
0viewers