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
​
        const INITIAL_STATE = {
          value: 0,
            warning: false
          }
​
          const update = (state, mutations) =>
            Object.assign({}, state, mutations)
​
            const tableFilter = (state = INITIAL_STATE, action) => {
            if(action.type === 'SET_TABLE_DATA') {
              return state = update(state, { value: state.value + 1 })
              }
                return state;
                }
​
        const FilterApp = combineReducers({tableFilter});
​
        //=====================Components
​
        const DisplayTable = ({test, DisplayTable}) => {
​
​
        return (
        <div>
            <button onClick={DisplayTable}>{String(test.warning)} {test.value}</button>
            <p></p>
        </div> )
    }
​
​
function mapStateToProps(state) {
  return {
      test: state.tableFilter
​
  };
};
​
​
const mapDispachToProps = (dispatch) => {
    return {
  DisplayTable: () => {dispatch (setTableFilter());
        },
    };
};
​
​
const AppTable = connect(mapStateToProps, mapDispachToProps)(DisplayTable);
​
        
        
        //=====================Action
        
          const setTableFilter = (click) => {
            return {
              type: 'SET_TABLE_DATA'
                    };
                  };
        
        //=====================Client.js
        
        
        const App = () => (
​
​
  <div>
    <AppTable />
  </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
anonymouspro
0viewers