Skip to content

Latest commit

 

History

History
150 lines (94 loc) · 6.26 KB

Examples.md

File metadata and controls

150 lines (94 loc) · 6.26 KB
Raw

🏠 Home

Dynadux - Examples

If you are already a Redux developer, you can compare the Redux versions with Dynadux versions.

Most of the examples are forked Redux examples, and they replaced with Dynadux.

Study all examples to learn the power of Dynadux.

Table of Contents

Counter
Todos
Shopping cart
Shopping cart, combine reducers

Counter

Counter - Redux version

Counter - Replace Redux with Dynadux

Edit festive-wright-jur7b

With Dynadux, we don't need the react-redux (and redux, of course).

This example demonstrates how you can replace Redux, but, this is not the approach of Dynadux.

Changes:

  • reducers are much more straightforward, decoupled from "dispatch" logic
  • index.js is using now the Dynadux store

Counter - Dynadux final version

Edit amazing-bohr-xzhp0

That is how Dynadux can be used.

Changes:

  • the creation of the dynadux store is under the stores/createCounterStore.js
  • the creation of the app store done on the constructor
  • also, on the constructor, we bind the setState method
  • we use the store.state as a state
  • the createCounterStore exposes business logic methods to update the state

Todos

Todos - Redux version

Todos - Dynadux version

Edit dynadux-todo

With Dynadux

  • The store created in stores/createAppStore.js
  • The store provides the state and business logic methods
  • In containers, you don't need to dispatch anymore, just use the business methods safely.
  • It uses the existed reducers which are simplified
  • The actions folder is not needed anymore
  • The actions are bound with the reducers in stores/createAppStore.js in a cheap way
  • The containers are much cleaner, are react components that make a mapping
  • In containers, we can use the new business methods at any time (with Redux, you can't).
  • The components remain intact since they are simply viewers
  • The containers would be omitted!

Shopping cart example

A real-world app. Shows how to create 2 sections of the app using the same store.

Shopping cart - Redux version

Shopping cart - Dynadux version

Edit clever-sun-xgdh7

1. Creation of the store

In stores/createAppStore.js we create our Business Store.

The store is importing only from the reducers folder. It combines the Sections of the app, the Products, and the Cart.

The createAppStore function returns an object with two properties. The value of each property taken from the reducer file. There, each getNNNSectionMethods function returns an API that used for the needs of each section.

For each Section of the App, the createAppStore needs

  • the initial state
  • the actions/reducers
  • the exported API

2. Implementation of Actions & Reducers

The whole store management is in the reducers. Reducers are the functions that executed per action. So these are the functions that change the state of our store.

3. Connect the Store the App

This is done at containers/App.js on the constructor.

4. The use of the store

The store means the state.

Each section in our app has getters.

To the fetch our Products from the back end we call this.store.products.getAllProducts().

To the access and render the Products we call this.store.products.products, this is a getter.

To access the Total amount of out cart we call this.store.cart.total, this is a getter.

To check out and send the receipt to the backend, we call this.store.cart.checkout().

5. Pass the API partially to the app

Now that we have a great API to handle the state of the app, pass it partially to the children's Sections/Components.

Do not pass the whole Store because this will lead to having a monolithic app. Only give what is needed. With Redux, you tend to create monolithic apps since you can dispatch from any Container, any action!.

Shopping Cart example (combine reducers version)

Cart example with multiple reducers

Edit Dynadux Shopping cart example

The created store is different here, as reducers we pass an array of two dictionaries of action/reducer pairs.

In this way, the ADD_TO_CART action exists in both Sections, Products, and Cart.

Read more