Xduck

If you love the awesome Redux you will love [Xduck]!

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

What is Xduck

[Xduck] is a JavaScript library that works perfectly 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 concept 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),
});