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>
<script src="//fb.me/react-with-addons-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.min.js"></script>
</head>
<body>
  <div id="container"></div>
</body>
</html>
 
let nextId = 0
​
//action creator
const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    id: nextId++,
    text
  }
}
​
//initialstate
const initialState = {
  todos: [],
  text: ''
}
​
//reducer
const Todo = (state = initialState, action) => {
  switch(action.type) {
    case 'ADD_TODO':
      return [...state, {text: action.text, id: action.id }]
    default:
      return state;
  }
}
​
const App = ({addTodo}) => (
      <div>
        <form>
          <input type="text" />
          <button onClick={() => dispatch(addTodo(input.value))>Add</button>
          <List>
        </form>  
      </div>
)
​
//created store
const { createStore } = Redux;
const store = creatStore(Todo);
​
const mapDispatchToProps = (dispatch) => {
  return {
    addTodo: () => {
      dispatch({
        type: 'ADD_TODO',
        id: nextId++,
        text
      })
    }
  };
};
​
const { connect } = ReactRedux;
const MyApp = connect(mapsDispatchToProps)(App);
​
​
​
RenderDOM(<MyApp />, document.getElementById('container'));
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers