Detailed examples of using Redux in React

This is the sixth article of the Webpack+React series configuration process record. For other content, please refer to:

• Part 1: Configuring a single-page application development environment using webpack, babel, react, and antdesign

• Part 2 ：Use react-router to implement single-page application routing

• Part 3: Optimizing the single-page development environment: runtime packaging and hot update of webpack and react

• Part 4: React cooperates with Webpack to implement code splitting and asynchronous loading

• Part 5: Separate the configuration of Webpack development environment and production environment

• Article 6: Using Redux in React

The main contents of this article include: 1. Modify the previous problems;
2. In the framework Introduce redux and use an example to briefly introduce how to use redux;
3. Other redux auxiliary libraries.

Fix the remaining issues

1. The reference to the path library is missing in webpack.prod.config.js, execute the buildnpm run build:prod failed. Just introduce the path library of node.js at the beginning of the file.

2. package.json defines a build:dev script. This script is actually a bit redundant, but sometimes it is necessary to package test version files, so it still needs to exist. The main problem is that the value of path under the output node in webpack.dev.config.js is incorrectly defined as the root directory '/', which cannot be seen when using the npm start command to start the runtime packaging. Problem, but when using npm run build:dev, there will be a permission error that cannot write files to the root directory. Just change the value of path. path: config.publicPath is changed to path: config.staticPath, publicPath: config.publicPath.

3. The style class names exported by css-loader and less-loader are too long. It would be better to remove the path part in localIdentName.

redux

Install redux

The command to install dependencies is as follows:

npm install --save redux react-redux redux-thunk  
npm install --save-dev redux-logger

Needless to say redux , I use it as a local database, react-redux helps you complete data subscription, redux-thunk allows you to implement asynchronous actions, and redux-logger is the log middleware of redux.

About redux and code layout

Before I start the introduction, I would like to express some of my own opinions on the use of redux:

As mentioned above, I treat redux as a local database , so I tend to encapsulate the role of redux similar to the Model in mvc, and make it an independent layer. This is different from another point of view - my company's projects prefer to treat each page as an independent module, and each module maintains its own reducer and action.

My approach can better achieve reducer reuse. The more important benefit for myself is centralized revision. More suitable for small projects or scenarios where you develop a project alone.

My company's project approach is more conducive to collaborative development by multiple people. After all, everyone only needs to maintain their own code. There are several problems with this method of company projects that I find difficult to accept:

The first is that the more modules there are, the more reducer and action definitions there are. Many times these codes are similar.

The more important thing is the second question: the storage of module data in the store is arranged directly under the root state. The data format of the root state is a bit like this:

{
    aModuleData:{...},
    bModuleData:{...},
    cModuleData:{...},
    dModuleData:{...},
    ...
}

The original intention of the project is to keep each module independent, but in actual use, it is very likely that aModule will use aModuleData and bModuleData at the same time. This goes against everyone's original intention of maintaining their own code, and does not give full play to the true capabilities of redux.

Another small problem is that the organization of the reducer usually affects the style of the application data state. After the reducer is distributed to each module, the form of the state is difficult to directly reflect in the code, especially when This is especially true when modules are loaded dynamically. However, it can be solved with the help of tools such as logger.

The controversy about this is mentioned in the Redux tutorial.

Using redux

No matter how the code is laid out, the method of using redux is mainly three steps: create a store, create an action, and create a reducer. After that comes the data processing and display related to the business or components.

Let’s take a look at the code layout of my approach:

The code to create the store is concentrated in model/index.js, model/actions/.js and model/reducer/.js are where the action creation function and reducer function are written respectively. You can DIY according to the module.

The code of model/index.js is as follows:

The code of model/actions/index.js is as follows:

An asynchronous actionCreator named login and three ordinary actionCreators are defined here.

After actionCreator is called by a component, it will send action to the store, and then be processed by the reducer. The reducer is defined in model/reducers/index.js. The code is as follows:

This completes the three steps. The above code simply simulates the login action. The data used for the login page is stored in loginPageData, and the current logged-in user data obtained after logging in is stored in entity data entities.

The next step is to connect redux and react, that is, to hand over the data in the redux store to the react component for use.

The first step is to mount the redux store to react to provide data support for react. The simplest way is to find the root component of the application (in my case, BasicExample.js), and then add the Provider tag to the outermost layer of its render function. The code snippet is as follows:

The red line draws the change points, exports the store object from model/index.js, and mounts it through the Provider tag provided by react-redux. In react, it provides data support for react.

Look at the last red line, we added this test example ReduxDemo in the Home component. Its code is as follows:

#The focus of the code is the connect function. This function is also provided by react-redux. Use it to wrap a normal display component (here is ReduxDemo - only responsible for displaying data), and then return a container component. The connect function uses the first parameter to allow the display component to subscribe to data from the store; the second parameter allows the display component to dispatch various actions by default.

This example calls the login interface to simulate login after the ReduxDemo is mounted. The returned results are stuffed into the store (the data format is determined by the organization of previously written reducers). The page displays content based on data in the store. Since the remote request issued by login is fake, it always fails here, so the failure content will be displayed.

This ends the introduction to the use of redux.

redux auxiliary library

In fact, I have quietly mentioned two auxiliary libraries in the above code, which are also the two libraries I want to recommend here:

1. Development tools redux-devtools: Combined with various other libraries, a visual debugging interface can be achieved.

2. Data normalization tool normalizr: normalizes organized data. After experiencing three projects, I highly recommend using this library, which can make the data organization of the application clearer, reduce redundant data, and reduce the performance impact caused by data refresh.

I won’t introduce it here for the time being. If you are interested, you can check the documentation on github.

The above is the detailed content of Detailed examples of using Redux in React. For more information, please follow other related articles on the PHP Chinese website!