dynadux

Table of Contents

• What is Dynadux
• How does it work?
• Motivation
• Create a Store
• Create a Business Store
• Architecture
• API
  • Create store
  • Reducers
  • Dispatch
  • Middlewares
  • Sections
  • Debugging
• Use it in React
• Examples
• Advanced
  • Dispatch Promises
  • Block Changes (and renders)
  • Debounce Changes and React renders
  • Create 3rd party Library
  • Understanding Dispatches in Reducer
• Typescript
• Terminology
• Change Log
• FAQ

What is Dynadux

Advanced and straightforward Stores based on dispatched Actions and Reducers.

Dynadux is an alternative to Redux, and it reduces Redux's boilerplate.

It can work for NodeJs libraries, React/Vue Apps, or React Components without complementary libraries.

Dynadux works with any UI layer.

Super light, zero dependencies, 2.2kb zipped bundle effort.

See the live examples.

How does it work?

In general

• You dispatch actions
• Dynadux is calling the reducers and middlewares
• Dynadux is calling the onChange callback with the new state

Motivation

Benefits to working with Dynadux instead of classic setState

• Reusable State Management.
• The use of pure reducer functions.
• Centralizing the state makes.
• Debuggable.
• History of the changes.

Benefits instead of Redux.

Install

npm install dynadux

or

yarn add dynadux

Types are already there. Dynadux is written in TypeScript.

Import

import {createStore} from "dynadux";

Everything of Dynadux is imported with {} from "dynadux, no default exports.

Create a Store

This is the store to add and remove todo items.

const actions = {
  ADD_TODO: 'ADD_TODO',
  REMOVE_TODO: 'REMOVE_TODO',
};

const store = createStore({
    initialState: {
        todos: [],
    },
    reducers: {
          [actions.ADD_TODO]: ({state: {todos}, payload}) => {
            return {
              todos: todos.concat(payload),
            };
          },
          [actions.REMOVE_TODO]: ({state: {todos}, payload: todoId}) => {
            return {
              todos: todos.filter(todo => todo.id !== todoId),
            };
          },
    },
    onChange: (state) => console.log('State changed:', state),
});

Now lets add a todo

store.dispatch(actions.ADD_TODO, {id: '234', label: 'Drink beers'}});

Let's remove this todo

store.dispatch(actions.REMOVE_TODO, '234');

On every change the onChange will be called with the above code will be consoled.

Create a Business Store (Dynadux's approach)

Create business logic stores and methods.

Note: this is a suggestion, not mandatory.

It is nice to have a store and dispatch actions, but we can do something more.

What is Business Store

The Business Store is a function that

• creates a Dynadux store that is used internally in this function only
• we pass to the Dynadux the initial state and the actions/reducers dictionary object
• the function returns an object with methods and getters, and this is the API of our Business store

The containers and any other components will use these getters and functions.

The principals

• wrap the create Dynadux store
• return a getter for the state
• return business logic methods that dispatch actions
• do not expose the dispatch but expose methods that dispatch actions
• do not expose the store to ensure that the store handled properly

const createTodoAppStore = (onChange) => {
    const store = createStore({
        initialState: {
            todos: [],
        },
        reducers: {
              [actions.ADD_TODO]: ({state: {todos}, payload}) => {
                return {
                  todos: todos.concat(payload),
                };
              },
              [actions.REMOVE_TODO]: ({state: {todos}, payload: todoId}) => {
                return {
                  todos: todos.filter(todo => todo.id !== todoId),
                };
              },
        },
        onChange,
    });

    return {
        get state() { return store.state; },
        addTodo: (todo) => store.dispatch(actions.ADD_TODO, todo),
        removeTodo: (todoId) => store.dispatch(actions.REMOVE_TODO, todoId),
    };
};

This is a function that creates the store and provides business logic methods. The addTodo & the removeTodo.

Usage of the Bussiness Store

Now our store it won't be directly a dynadux store but a more sophisticated business one.

const store = createTodoAppStore(state => console.log('State change:', state));

And we can add a todo in a more business logic way.

store.addTodo({id: '121', label: 'Drink beers'});

And remove it in a more straightforward way.

store.removeTodo('121');

For React components the store should be instantiated in constructor.

const store = createTodoAppStore(() => this.setState({}));

Then pass the store to children and use the store.state for the state.

It is not needed to pass the entire store to the children, only pass what is needed.

Benefits of Business stores

In the Business store approach, the Containers are not dispatching actions, but they use the methods of the store.

The action would be dispatched from any container. But some actions are for the internal use of the reducers. Also, each action requires a specific type of payload. But from the action's user perspective it is unclear which payload type should be used.

All these problems are solved providing to the containers javascript methods that do all this job. These are the Business methods provided by the app store that is wrapping the Dynadux store.

In the end, only business methods, reducers, and middlewares are dispatching actions. That makes the code much cleaner, and the actions can be used safely.

Redux/Dynadux Containers Connection Comparison

Diagram

That's all

The logic of Dynadux depicted in the text above.

There is nothing more. Portable and straightforward, use your imagination and create Business Stores.

Dynadux's Architecture

Dynadux is an elementary library. Technically the Dynadux is only an

Object.assign({}, state, middleware.before(), reducer(), middleware.after())

And nothing else! Since it is small and straightforward, we can use it in the architecture of Business Stores.

API

Just for App State Management

That's enough to setup an Application State Management.

• Create store
• Reducers
• Sections

Complete guide

Complete guide including middlewares and debugging.

• Create store
• Reducers
• Middlewares
• Sections
• Debugging

What's next? The future of Dynadux.

Feel free. Dynadux is simple and straightforward state management. There are no plans to introduce new API or features because simplicity matters.

Dynadux has no dependencies, so no need to maintain them. Dynadux is running on large production projects, and most of the fixes are already applied.

Improvements and updates will be for

• react-dynadux package where is Dynadux Provider for React components
• Current and new 3rd party Sections
• but ont for the Dynadux itself.

Read more

• FAQ Frequently asked questions
• Use it in React How to use it in react
• Examples Live examples. Examples compared to redux's implementations
• Advanced Dispached promises, boost up your app and more
• Typescript Tips for Typescript implementations
• Terminology Terminology of dynadux, (is small!)
• History, Undo/Redo Middleware for History, Undo/Redo and Restore Points
• React Dynadux Provider for Dynadux App Stores
• Change Log Changes of Dynadux per semver version