All examples By author By category About

itsashis4u

Full window Github gist

Learning Redux and React-Redux | JS Bin// source https://jsbin.com/tuwoyim

<!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-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.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.4/react-redux.min.js"></script>
</head>
<body>

<div id="root"></div>
<script id="jsbin-javascript">
//jshint esnext:true

'use strict';

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }

var todos = function todos(state, action) {
  if (state === undefined) state = [];

switch (action.type) {
    case 'ADD_TODO':
      return [].concat(_toConsumableArray(state), [todo(undefined, action)]);
    case 'TOGGLE_TODO':
      return state.map(function (t) {
        return todo(t, action);
      });
    default:
      return state;
  }
};

var visibilityFilter = function visibilityFilter(state, action) {
  if (state === undefined) state = "SHOW_ALL";

switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter;
    default:
      return state;
  }
};

var nextTodoId = 0;

var addTodo = function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text: text,
    id: nextTodoId++
  };
};

var toggleTodo = function toggleTodo(id) {
  return {
    type: 'TOGGLE_TODO',
    id: id
  };
};

var setVisibilityFilter = function setVisibilityFilter(filter) {
  return {
    type: 'SET_VISIBILITY_FILTER',
    filter: filter
  };
};

var _Redux = Redux;
var combineReducers = _Redux.combineReducers;

var todoApp = combineReducers({
  todos: todos,
  visibilityFilter: visibilityFilter
});

var _React = React;
var Component = _React.Component;
var _ReactRedux = ReactRedux;
var connect = _ReactRedux.connect;

var Link = function Link(_ref) {
  var active = _ref.active;
  var children = _ref.children;
  var onClick = _ref.onClick;

if (active) return React.createElement(
    'span',
    null,
    children
  );
  return React.createElement(
    'a',
    { href: '#',
      onClick: function (e) {
        e.preventDefault();
        onClick();
      }
    },
    children
  );
};

var mapStateToLinkProps = function mapStateToLinkProps(state, ownProps) {
  return {
    active: ownProps.filter === state.visibilityFilter
  };
};

var mapDispatchToLinkProps = function mapDispatchToLinkProps(dispatch, ownProps) {
  return {
    onClick: function onClick() {
      dispatch(setVisibilityFilter(ownProps.filter));
    }
  };
};

var FilterLink = connect(mapStateToLinkProps, mapDispatchToLinkProps)(Link);

var Todo = function Todo(_ref2) {
  var text = _ref2.text;
  var completed = _ref2.completed;
  var onClickHandler = _ref2.onClickHandler;

return React.createElement(
    'li',
    {
      onClick: onClickHandler,
      style: { textDecoration: completed ? 'line-through' : 'none', userSelect: 'none' }
    },
    text
  );
};

var TodoList = function TodoList(_ref3) {
  var todos = _ref3.todos;
  var onTodoClick = _ref3.onTodoClick;

return React.createElement(
    'ul',
    null,
    todos.map(function (todo) {
      return React.createElement(Todo, _extends({
        key: todo.id
      }, todo, {
        onClickHandler: function () {
          return onTodoClick(todo.id);
        }
      }));
    })
  );
};

var VisibleTodoList = connect(mapStateToTodoListProps, mapDispatchToTodoListProps)(TodoList);

var AddTodo = function AddTodo(_ref4) {
  var dispatch = _ref4.dispatch;

AddTodo = connect()(AddTodo);

var Footer = function Footer() {
  return React.createElement(
    'p',
    null,
    'Show :',
    ' ',
    React.createElement(
      FilterLink,
      { filter: 'SHOW_ALL' },
      'All'
    ),
    ' ',
    React.createElement(
      FilterLink,
      { filter: 'SHOW_ACTIVE' },
      'Active'
    ),
    ' ',
    React.createElement(
      FilterLink,
      { filter: 'SHOW_COMPLETED' },
      'Completed'
    )
  );
};

var TodoApp = function TodoApp() {
  return React.createElement(
    'div',
    null,
    React.createElement(AddTodo, null),
    React.createElement(VisibleTodoList, null),
    React.createElement(Footer, null)
  );
};

var _Redux2 = Redux;
var createStore = _Redux2.createStore;
var _ReactRedux2 = ReactRedux;
var Provider = _ReactRedux2.Provider;

ReactDOM.render(React.createElement(
  Provider,
  { store: createStore(todoApp) },
  React.createElement(TodoApp, null)
), document.getElementById('root'));
</script>

const todos = (state = [], action) => {
  switch(action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ];
      case 'TOGGLE_TODO':
        return state.map(t => todo(t, action));
    default:
      return state;
  }
}

const visibilityFilter = (
  state = "SHOW_ALL",
  action
) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter;
    default:
      return state;
  }
};

const getVisibleTodos = (
  todos,
  filter
) => {
  switch(filter) {
    case 'SHOW_ALL':
      return todos;
    case 'SHOW_ACTIVE':
      return todos.filter(todo => !todo.completed);
    case 'SHOW_COMPLETED':
      return todos.filter(todo => todo.completed);
  }
}

let nextTodoId = 0;

const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    text,
    id: nextTodoId++
  }
}

const toggleTodo = (id) => {
  return {
    type: 'TOGGLE_TODO',
    id
  };
}

const setVisibilityFilter = (filter) => {
  return {
    type: 'SET_VISIBILITY_FILTER',
    filter
  }
}

const { combineReducers } = Redux;

const todoApp = combineReducers({
  todos,
  visibilityFilter
});

const { Component } = React;
const { connect } = ReactRedux;

const mapStateToLinkProps = (
  state,
  ownProps
) => {
  return {
    active:
    ownProps.filter === state.visibilityFilter
  };
};

const mapDispatchToLinkProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter));
    }
  };
};

const FilterLink = connect(
  mapStateToLinkProps,
  mapDispatchToLinkProps
)(Link);

const Todo = ({ text, completed, onClickHandler }) => {
  return (
    <li
      onClick={onClickHandler}
      style={{textDecoration:
          completed?
          'line-through':
          'none', userSelect: 'none'}}
      >
      {text}
    </li>
  );
};

const TodoList = ({ todos, onTodoClick }) => {
  return (
    <ul>
      {
        todos.map(todo =>
        <Todo
          key={todo.id}
          {...todo}
          onClickHandler={() => onTodoClick(todo.id)}
        />)
      }
    </ul>
  );
};

const VisibleTodoList = connect(
  mapStateToTodoListProps,
  mapDispatchToTodoListProps
)(TodoList);

AddTodo = connect()(AddTodo);

const Footer = () => (
<p>
    Show :
    { ' ' }
    <FilterLink filter="SHOW_ALL"  >
      All
    </FilterLink>
    { ' ' }
    <FilterLink filter="SHOW_ACTIVE"  >
      Active
    </FilterLink>
    { ' ' }
    <FilterLink filter="SHOW_COMPLETED"  >
      Completed
    </FilterLink>
  </p>
);

const TodoApp = () => (
<div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
</div>

);

const { createStore } = Redux;

const { Provider } = ReactRedux;

ReactDOM.render(
  <Provider store={createStore(todoApp) }>
    <TodoApp />
  </Provider>,
document.getElementById('root')
);
</script></body>
</html>

https://fb.me/react-15.1.0.js

https://fb.me/react-dom-15.1.0.js

https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.4/react-redux.min.js