Redux Alternative

Question

I recently started learning React, and I quickly ran into the problem of a bloated parent component full of functions and states. At first I looked at Flux, and then I looked at Redux, but both of them seemed really advanced solutions.

I am wondering why something like this has not been done:

//EventPropagator.js let EventPropagator = { registerListener(listenerObject){ if (this.listeners == null) this.listeners = [] this.listeners.push(listenerObject) }, fireEvent(eventObject){ let listenerList = this.listeners.filter(function(listener){ return listener.eventType === eventObject.eventType }) listenerList.forEach((listener) => { listener.callback(eventObject.payload) }) } } export default EventPropagator 

To use: the components are simply registerListener and fireEvent :

 //main.js import EventPropagator from './events/EventPropagator' EventPropagator.registerListener({ "eventType": "carry_coconut", "callback": (payload) => { // actually carry coconut this.setState({"swallow_type": payload.swallow}) console.log(payload) } }) EventPropagator.fireEvent({ "eventType": "carry_coconut", "payload": { "swallow": "african" } }) 

This will allow a lot of denouement, and the condition can be easily conveyed through these kinds of events. What are the disadvantages of this approach?

Answer 1

You have to try mobx

MobX is a state management library that takes advantage of decorators and removes unwanted code. For example, mobx does not have the concept of reducers .

Hope this helps!

Answer 2

There is Reactn based on Reactn .
This is several orders of magnitude easier to use than Redux. Check out https://www.npmjs.com/package/reactn and read the Stover blog .

Answer 3

Redux is a continuation of the React declarative programming style. An easy way to map your application logic to components is to use something like Backbone.React.Component , but using redux will allow you to use all the tool and middleware. In addition, undefined transitions in applications make debugging a lot easier. Now I agree that you need a lot of guides and templates to get anyway.

If you want to use redux, you can see something like redux-auto

Redux-auto: Redux simplified (with a plug and play approach)

Removing the template code when configuring the repository and actions. What for? This utility allows you to start and run Rudux in a fraction of the time!

Now you can see redux-auto: helloworld project

Answer 4

If you want to take full advantage of Redux, use Redux.

If you want to maintain synchronization between React components, use Duix.

I am the creator of Duix. I have been using it for 1 year, and finally I released it a few hours ago. Check out the document: https://www.npmjs.com/package/duix

Answer 5

An event-driven system is required, so a child component can talk to its sibling, but this does not mean that data should be transmitted as a payload of events. This will lead to the creation of a management system and a nightmare for a project in which several developers are working on it.

As long as you follow an architecture pattern similar to a google it stream, you can really do it successfully using only javascript and Javascript objects to store data along with the event system.

Data should be considered as one of three different states. It either

• raw data retrieved from the server
• converted data (converted from the original)
• Save data. What acts as a model with which the user interface is associated with

If you are writing a javascript library to handle moving data between three states and handle transformations, you can use an event system to trigger a “store change” event, which components can listen to and execute on their own. p>

Answer 6

https://github.com/deepakpatil84/pure-data Note: I am the author of this

Answer 7

Using your EventPropagator solves the communication problem, but does not handle data integrity. For example, if more than two components listen on the same event and use the payload of this event to update their own states. The more components listen to the same events, the more difficult it is to make sure that all these components have the same data in their own states.

Secondly, Flux / Redux provides a unidirectional data stream. A simple example would be about 2 components A and B consuming the same X data from an external source (API or storage). The user can interact with any of them to get the latest X data. Now, if the user asks B to update X, we have two solutions with your EventPropagator:

1. B will update X itself and generate an event to inform A of the update, to allow A to re-render. The same goes for A if the user asks A to update X. This is a bi-directional data stream.
2. B triggers an event for A requesting an update of X, and waits until A fires an event to receive an updated X. If the user requests an update of A , A will do it himself and report B. This is a unidirectional data stream.

When the number of components increases and communication is not limited to only A & B, you may need to stick to only one of these two solutions to prevent glitches in your application logic. Flux / Redux chooses the second, and we are pleased with it.

If you really don't think you need another library for data management, you should take a look at the latest React: Context feature . It provides the most important functions that a data management library can have, and this is only React. It is noted that you must upgrade your React project to 16.3 in order to use this feature.

Answer 8

Another frugal alternative for several stores - response-scopes

Here are some features:

• The syntax of simple decorators,
• Allow independent storage logic definition directly in components
• Easily connect stores through the component tree
• Allow templated processing of complex / asynchronous data
• SSR with asynchronous data
• etc