Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to use Redux in React, the article is very detailed, has a certain reference value, interested friends must read it!

Fix the remaining problems

The reference to the path library is missing in webpack.prod.config.js, and the execution of the build npm run build:prod failed. Just introduce node.js 's path library at the beginning of the file.

Package.json defines a script for build:dev, which is actually a bit redundant, but sometimes you need to package the test version of the file, 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 mistakenly defined as the root directory'/'. There is no problem when using the npm start command to start the runtime packaging, but there will be a permission error that cannot write files to the root directory when using npm run build:dev. Just change the value of path. Change path: config.publicPath to path: config.staticPath,publicPath: config.publicPath.

The style class names exported by css-loader and less-loader are too long, so it would be nice to remove the path part from localIdentName.

Redux install redux

The commands to install dependencies are as follows:

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

Redux needless to say, I use it as a local database, react-redux helps you complete data subscription, redux-thunk can let you implement asynchronous action,redux-logger is redux's logging middleware.

About redux and Code layout

Before I start the introduction, I would like to make some comments on the use of redux:

As I said earlier, I treat redux as a local database, so I tend to encapsulate redux as a role similar to Model in mvc, separate into one layer. This is at odds with the view that my projects at the company tend to treat each page as a separate module, each maintaining its own reducer and action.

My approach can better achieve the reuse of reducer. A more important benefit for myself is to focus on revision. It is more suitable for small projects or developing a project on its own.

My company's project approach is more beneficial to multi-person collaborative development, after all, everyone can maintain their own code. There are several problems with this approach to corporate projects that are more difficult for me to accept:

The first is that the more modules there are, the more reducer and action are defined, and most of the time the code is similar.

More importantly, the second problem: the storage of module data in store is arranged directly under the root state, and the data format of the root state is somewhat like this:

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

The original intention of the project is to keep each module independent, but in fact, there is a great possibility that aModule will use aModuleData and bModuleData at the same time. This is contrary to everyone's original intention to maintain their own code, and does not have the real ability to make good use 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 dispersed into each module, the state form is difficult to reflect directly in the code, especially when the module is dynamically loaded. But it can be solved with the help of tools such as logger.

The controversy about this piece is mentioned in Redux's tutorial.

Use redux

No matter how the code is laid out, the method of using redux is mainly a three-step process: create store, create action, and create reducer. After that, there is data processing and presentation related to the business or components.

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

The code to create store is concentrated in model/index.js, where action is written to create functions and reducer functions are written in model/actions/.js and model/reducer/.js, and you can DIY yourself according to the module.

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

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

An asynchronous actionCreator called login and three normal actionCreator are defined here.

When actionCreator is called by a component, it sends action to store, and then is processed by reducer. Reducer is defined in model/reducers/index.js, and the code is as follows:

This is the completion of the three steps. The above code simply simulates the login action. The data used in the login page is stored in loginPageData, and the current login user data obtained after login is stored in the entity data entities.

The next step is to associate redux with react, that is, to give the data in the store of redux to the components of react.

The first step is to mount the store of redux to react to provide data support for react. The easiest thing to do is to find the root component of the application (I'm BasicExample.js in this case) and add the Providor tag to the outermost layer of its render function. The code snippet is as follows:

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

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

The code focuses on the connect function. This function is also provided by react-redux. Use it to wrap a normal presentation component (in this case, ReduxDemo-- is only responsible for displaying data), and then return a container component. The connect function makes the presentation component subscribe to the data from store with the first parameter, and the display component can dispatch various action by default with the second parameter.

This example calls the login API to simulate the login after the ReduxDemo mount is completed. The returned result is crammed into the store (the data format is determined by the organization of the previously written reducers). The page displays the content based on the data in the store. Because the remote request made by login is fake, it always fails here, so the failed content is displayed.

This concludes the introduction to the use of redux.

Redux auxiliary library

In fact, I have quietly mentioned two helper libraries in the above code, which are also two libraries that I would like to recommend here:

Development tool redux-devtools: a visual debugging interface can be achieved with a variety of other libraries.

Data normalization tool normalizr: normalizes the organization of data. After the experience of three projects, individuals 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.

The above is all the content of the article "how to use Redux in React". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.