Recently, I studied the directory structure of Example in Redux project, and found that there are many folders and concepts in it, so I drew a picture to sort them out.

In the example of the real-world in examples, the file structure looks like this:



Let’s take a quick look at the redux and React data flows:

redux



react



Using redux in React replaces state with Store, resulting in the following;



This transformation process does the following:

  1. Replace onChage with dispatch(Action);

  2. Introduce state from store into Component for render;

It is the exit and entry points of the Component in the figure above. When the two points are connected, the data flow is connected.

Take a look at the examples, which have six folders in their directory structure: Components, Actions, Middleware, Reducers, Store, and containers:

  • Components stores the Component code

  • Actions Stores the code for actions

  • Middleware stores code for Redux middleware

  • Reducers stores the Reducer code

  • Store stores the code that initializes a store

  • Containers is critical, connecting Component events and states to Action and Store, respectively.

For example, the containers/ userpage.js code:



Finally, the two parameters of the connect function will

1. State in Store is mapped to component.props; 2. Map actions to Component events;

Baichuan.taobao.com is alibaba Group “cloud” + “end” core strategy is Alibaba Group wireless open platform, based on world-class back-end services and mature business components, through the opening of “technology, business and big data”, Provide mobile entrepreneurs with solutions that can quickly build apps, commercialize apps and improve user experience; At the same time, it provides diversified entrepreneurial services – physical space, incubation operation, venture investment, etc., providing comprehensive guarantee for mobile entrepreneurs.

        About Alibaichuan