xduck v0.0.1

Xduck

If you love the awesome Redux you will love Xduck!

WARNING: This project is currently under development, do not use it in the production environment

What is Xduck

Xduck is a JavaScript library that works well with Redux.

Motivation

As we know, Redux is a predictable state container for JavaScript apps, it evolved from Flux, which came from React. So we always use Redux together with React.

React is awesome, Redux is amazing. However, if we want to use them together, we need to do more works like connect, Provider, mapStateToProps, mapDispatchToProps, etc. Additional, it's redundant to have state concepts in both React and Redux.

Can we go even further to create a framework 100% suitable for Redux?

Yes, that's Xduck!

Hello World

<div id="app">
  <p>{{state.message}}</p>
</div>

import { createStore } from 'redux';
import Xduck from 'xduck';

const initialState = {
  message: 'Hello Xduck!',
};

function reducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

new Xduck({
  el: document.getElementById('app'),
  store: createStore(reducer),
});

Data Flow

<div id="app">
  <p>{{state.message}}</p>
  <input
    type="text"
    oninput="{{Xduck.action}}"
    action.type="UPDATE"
    action.message="{{this.value}}"
    value="{{state.message}}"
  ></input>
</div>

import { createStore } from 'redux';
import Xduck from 'Xduck';

const initialState = {
  message: 'Hello Xduck',
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE':
      return Object.assign({}, state, {
        message: action.message,
      });
    default:
      return state;
  }
}

new Xduck({
  el: document.getElementById('app'),
  store: createStore(reducer),
});

Render a List

<div id="app">
  <ul>
    {{#state.todos}}
    <li>{{text}}</li>
    {{/state.todos}}
  </ul>
</div>

import { createStore } from 'redux';
import Xduck from 'Xduck';

const initialState = {
  todos: [
    { text: 'Learn Redux' },
    { text: 'Learn XDuck' },
    { text: 'Build Something Awesome' },
  ],
};

function reducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

new Xduck({
  el: document.getElementById('app'),
  store: createStore(reducer),
});

TODO App

<div id="app">
  <input
    type="text"
    oninput="{{Xduck.action}}"
    action.type="UPDATE"
    action.message="{{this.value}}"
    value="{{state.message}}"
  ></input>
  <button
    type="button"
    onclick="{{Xduck.action}}"
    action.type="ADD_TODO"
  >+</button>
  <ul>
    {{#state.todos}}
    <li>
      <span>{{text}}</span>
      <button
        type="button"
        onclick="{{Xduck.action}}"
        action.type="REMOVE_TODO"
        action.index="{{@index}}"
      >X</button>
    </li>
    {{/state.todos}}
  </ul>
</div>

import { createStore } from 'redux';
import Xduck from 'Xduck';

const initialState = {
  todos: [
    { text: 'Learn Redux' },
    { text: 'Learn Xduck' },
    { text: 'Build Something Awesome' },
  ],
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE':
      return Object.assign({}, state, {
        message: action.message,
      });
    case 'ADD_TODO': {
      const todos = state.todos.slice();
      todos.push({ text: state.message });
      return Object.assign({}, state, { todos });
    }
    case 'REMOVE_TODO': {
      const todos = state.todos.slice();
      todos.splice(action.index, 1);
      return Object.assign({}, state, { todos });
    }
    default:
      return state;
  }
}

new Xduck({
  el: document.getElementById('app'),
  store: createStore(reducer),
});