A data management method based on a React project, a control device, and a storage medium
By simplifying the data management methods for React projects, the problem of writing a lot of boilerplate code for data transfer between non-parent and child components is solved, and an efficient data management process is achieved. In particular, no additional configuration is required in asynchronous scenarios, which improves development efficiency.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-12-30
- Publication Date
- 2026-04-10
AI Technical Summary
In React framework project development, data transfer between non-parent and child components requires writing a lot of boilerplate code, especially when the cross-component data transfer scenario is simple, existing technologies have the problem of large coding workload.
This paper provides a data management method for React projects. By initializing the React project, installing necessary packages, modifying the project configuration file to recognize asynchronous functions, creating the src/models folder and writing data management code, and providing a data storage object store, the data management process is simplified. Only one function needs to be written to realize the mapping relationship between Redux Action, ActionType and Reducer, and asynchronous processing is implemented through the async function.
It greatly simplifies the coding work of data management, reduces the writing of boilerplate code, and improves development efficiency, especially in asynchronous processing scenarios where no additional configuration is required.
Smart Images
Figure CN116126325B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of data processing, and specifically provides a data management method based on a React project, a control device and a storage medium. BACKGROUND
[0002] React is a JavaScript library for building user interfaces, and using React can facilitate development based on components (which can be understood as independent interface blocks and can be nested). The interface display content of the component is obtained by using the rendering function (render) in the component on data (the data includes two parts, one is the internal state data of the component, which is called state and can be maintained through internal logic of the component, and the other is the externally transmitted data, which is called props and cannot be changed by the component itself). This way of writing components liberates developers from the control logic of the interface, drives the interface through data, updates the interface with data, so that developers can focus more on the correct processing of data and improve the efficiency of interface development. Through Redux, we can realize data sharing between components.
[0003] In front-end component-based development (for example, using the react framework to develop projects), data transmission between non-parent and child components is more troublesome, and generally based on third-party data management tools such as Redux. Redux is an excellent application state container that provides predictable state management with predictable, centralized management, debuggable, flexible, and other features. When writing, Action, ActionType, Reducer, asynchronous middleware, etc. are required. However, the original Redux requires writing Action, ActionType, Reducer, etc., and asynchronous processing requires additional configuration, coding, etc. In our actual work, most of the cross-component data transmission scenarios are simple, but still require a large amount of boilerplate code to be written.
[0004] Correspondingly, there is a need in the art for a new data management scheme based on a React project to solve the above problems. SUMMARY
[0005] The present application aims to solve the above technical problems, that is, to solve the problem of writing a large amount of boilerplate code in react framework project development for data transmission between non-parent and child components when the cross-component data transmission scenario is simple. The present application provides a data management method based on a React project, a control device and a storage medium.
[0006] In a first aspect, the present application provides a data management method based on a React project, which comprises:
[0007] initializing a React project;
[0008] installing a software package needed in the React project;
[0009] if there is an asynchronous function in the React project, modifying a project configuration file in the React project to identify the asynchronous function;
[0010] creating a src / models folder in the root directory of the React project, the src / models folder being used for writing code for data management;
[0011] creating a file in the src / models folder;
[0012] modifying a src / App.jsx file in the initialized React project to provide a data storage object store to the React project, creating an environment of a data management module, and all business components using the data management module being in the environment of the created data management module;
[0013] creating a src / Home.jsx file;
[0014] in the root directory of the project, executing a start project command: yarn start to start the React project.
[0015] In one of the technical solutions of the data management method based on the React project, the initializing a React project comprises:
[0016] installing a version node.js 14 of an event-driven JavaScript runtime;
[0017] installing a software package manager yarn;
[0018] initializing the React project by using a scaffolding tool create-react-app;
[0019] entering the initialized project directory, and executing a command yarn eject to expose a project configuration.
[0020] In one of the technical solutions of the data management method based on the React project, the installing a software package needed in the React project comprises:
[0021] In the project root directory, execute the command yarn add@ra-lib / model@ra-lib / model-async-function-loader react-redux redux redux-thunk redux-undo to install the @ra-lib / model, @ra-lib / model-async-function-loader, react-redux, redux, redux-thunk and redux-undo packages;
[0022] Among them, the @ra-lib / model package and the @ra-lib / model-async-function-loader package are required for secondary packaging of redux; the react-redux package, the redux package, the redux-thunk package and the redux-undo package are required for native redux.
[0023] In one of the technical solutions of the above data management method based on the React project, if there is an asynchronous function in the React project, the project configuration file in the React project is modified to identify the asynchronous function, including:
[0024] Add a loader configuration in the config / webpack.config.js in the React.js library, wherein the loader configuration uses the @ra-lib / model-async-function-loader package.
[0025] In one of the technical solutions of the above data management method based on the React project, creating files in the src / models folder includes:
[0026] Create an index.js file, specifically:
[0027] Import all user-defined data management objects models in the index.js file in the React.js library;
[0028] Import the create function createStoreByModels from the @ra-lib / model package;
[0029] Call the create function createStoreByModels, and pass in all user-defined data management objects models;
[0030] Create store, connect and action;
[0031] The store and connect for external data management are used in the model link of high-order components;
[0032] Methods for all operation data defined in the action model;
[0033] A demo.js file is created for creating one of the user-defined data management objects in the models, specifically:
[0034] A variable state is defined for initializing data, and the state is used to store data;
[0035] Functions for operating data are written.
[0036] In one of the technical solutions of the above data management method based on a React project, creating a file in the src / models folder further includes:
[0037] A models.js file is created for automatically collecting all user-defined data management objects in the data management module from the src / models folder.
[0038] In one of the technical solutions of the above data management method based on a React project, creating the src / Home.jsx file includes:
[0039] The high-order component connect provided by the models exported in the index.js is introduced;
[0040] The Home component is linked to the models by using the connect;
[0041] State data defined in the models is obtained;
[0042] The state data is injected into the Home component through props;
[0043] The injected state data and related modification data action methods are obtained in the Home component through props.
[0044] In a second aspect, the present application provides a data management device based on a React project, which comprises:
[0045] An initialization module is configured to initialize a React project;
[0046] An installation module is configured to install software packages needed in the React project;
[0047] The identification module is configured to modify a project configuration file in the React project to identify the asynchronous function if the asynchronous function exists in the React project.
[0048] The first creation module is configured to create a src / models folder in the root directory of the React project, and the src / models folder is used to write code for data management.
[0049] The second creation module is configured to create a file in the src / models folder.
[0050] The use module is configured to modify a src / App.jsx file in the initialized React project, provide a data storage object store to the React project, and create an environment of a data management module, and all business components using the data management module are in the environment of the created data management module.
[0051] The third creation module is configured to create a src / Home.jsx file.
[0052] The start module is configured to execute a start project command: yarn start in the root directory of the project to start the React project.
[0053] In a third aspect, the present application provides a control device, comprising a processor and a storage device, the storage device is suitable for storing a plurality of program codes, the program codes are suitable for being loaded and run by the processor to execute the method described in any one of the technical solutions of the above-mentioned data management method based on the React project.
[0054] In a fourth aspect, a computer readable storage medium is provided, and the computer readable storage medium has a plurality of program codes stored therein, and the program codes are suitable for being loaded and run by a processor to execute the method described in any one of the technical solutions of the above-mentioned data management method based on the React project.
[0055] The above-mentioned one or more technical solutions of the present application have at least one or more of the following advantages
[0056] Advantages:
[0057] In the technical scheme of the present application, a data management method based on a React project is proposed, which aims to initialize a React project, install the software package needed in the React project, modify the project configuration file in the React project to identify the asynchronous function if the asynchronous function exists in the React project, create a src / models folder in the root directory of the React project, which is used to write the code of data management, create a file in the src / models folder, modify the src / App.jsx file in the initialized React project, provide the data storage object store to the React project, create an environment of a data management module, and all business components using the data management module are in the environment of the created data management module, create a src / Home.jsx file, execute a start project command: yarn start in the root directory of the project to start the React project. The data management method only needs to write a function to realize the corresponding relationship of the Action, ActionType and Reducer of redux, and further, for asynchronous processing, a keyword Async needs to be added in front of the customized function to realize the asynchronous processing. BRIEF DESCRIPTION OF DRAWINGS
[0058] The disclosed content of the present application will become more apparent with reference to the drawings. It is easy for those skilled in the art to understand that the drawings are only for the purpose of illustration, and are not intended to limit the scope of protection of the present application. In addition, similar numbers in the drawings are used to represent similar components, wherein:
[0059] Figure 1 is a main step flow diagram of a data management method based on a React project according to an embodiment of the present application;
[0060] Figure 2 is a main structure diagram of a data management device based on a React project according to an embodiment of the present application;
[0061] Figure 3 is a main structure diagram of a control device according to an embodiment of the present application. DETAILED DESCRIPTION
[0062] Some embodiments of the present application will be described below with reference to the drawings. Those skilled in the art should understand that these embodiments are only used to explain the technical principles of the present application, and are not intended to limit the scope of protection of the present application.
[0063] In the description of the present application, "module" and "processor" can include hardware, software or a combination of both. A module can include hardware circuit, various suitable sensors, communication port, memory, and can also include software part such as program code, and can be a combination of software and hardware. The processor can be a central processing unit, microprocessor, image processor, digital signal processor or any other suitable processor. The processor has data and / or signal processing function. The processor can be implemented in software, hardware or a combination of both. The non-transitory computer readable storage medium includes any suitable medium that can store program code, such as magnetic disk, hard disk, optical disk, flash memory, read-only memory, random access memory, etc. The term "A and / or B" means all possible combinations of A and B, such as only A, only B or both A and B. The term "at least one of A or B" or "at least one of A and B" has similar meaning as "A and / or B", and can include only A, only B or both A and B. The singular form of the term "one", "this" can also include plural forms.
[0064] Referring to the drawings Figure 1 , Figure 1 is a schematic diagram of main steps of a data management method based on a React project according to an embodiment of the present application. As shown in Figure 1 , the data management method based on the React project in the embodiment of the present application mainly includes the following steps S101-S103.
[0065] Step S101: initializing a React project.
[0066] In an embodiment of the embodiment of the present application, the initializing the React project includes:
[0067] installing a version node.js 14 of an event-driven JavaScript runtime;
[0068] installing a package manager yarn;
[0069] initializing the React project using a scaffold tool create-react-app;
[0070] entering the initialized project directory, and executing a command yarn eject to expose project configuration.
[0071] In one specific example, to initialize a React project, first, make sure that node.js 14 or later version is installed in the computer, and if not, download it from the official website; then install the package manager yarn by executing the command: npm i-g yarn in the computer terminal; then initialize the above-mentioned React project by using the scaffolding tool create-react-app by executing the command: npx create-react-app react-model in the computer terminal; finally, enter the initialized project directory, and execute the command: yarn eject to expose the project configuration config / webpack.config.js.
[0072] Step S102: Install the required packages in the React project.
[0073] In one embodiment of the embodiment of the present application, installing the required packages in the React project includes:
[0074] In the project root directory, execute the command yarn add @ra-lib / model @ra-lib / model-async-function-loader react-redux redux redux-thunk redux-undo to install the @ra-lib / model, @ra-lib / model-async-function-loader, react-redux, redux, redux-thunk, and redux-undo packages;
[0075] Among them, the @ra-lib / model package and the @ra-lib / model-async-function-loader package are required for secondary encapsulation of redux; the react-redux package, the redux package, the redux-thunk package, and the redux-undo package are required for native redux.
[0076] Step S103: Modify the project configuration file in the React project to implement asynchronous function recognition.
[0077] In one embodiment of the embodiment of the present application, modifying the project configuration file in the React project to implement asynchronous function recognition includes:
[0078] In config / webpack.config.js, add a loader configuration, and the relevant code is as follows:
[0079] {
[0080] test: / \.js$ / ,
[0081] enforce: 'pre',
[0082] include: path.join(paths.appSrc,'models'),
[0083] loader:
[0084] require.resolve('@ra-lib / model-async-function-loader'),
[0085] },
[0086] The loader configuration uses the @ra-lib / model-async-function-loader package.
[0087] Step S104: Create a src / models folder in the root directory of the React project for writing data management code.
[0088] In one specific example, the src / models folder serves as a data management module for writing data management related code.
[0089] Step S105: Create a file in the src / models folder.
[0090] In one embodiment of the present embodiment, creating a file in the src / models folder includes:
[0091] Creating an index.js file, specifically:
[0092] Import all user-defined data management objects models in the index.js file in the React.js library, where multiple data management objects may exist according to different business needs, such as demo.js, user.js, company.js, etc.
[0093] Import the create function createStoreByModels from the @ra-lib / model package;
[0094] Call the create function createStoreByModels and pass in all user-defined data management objects models;
[0095] Create the store, connect, and action;
[0096] Export the data management store (data storage object) and connect (project business components, such as Home.jsx) to the outside world, and use the higher-order components linked by the model (data management module);
[0097] The action model (data management module) defines all the methods for manipulating data, which together form the index.js file.
[0098] The code in the index.js file is as follows:
[0099] import models from '. / models'; / / Import all defined models
[0100] import {createStoreByModels} from '@ra-lib / model'; / / Model-related toolkit
[0101] const result=createStoreByModels(models,{
[0102] / / middlewares:[ / / Additional Redux middlewares]
[0103] / / thunk,
[0104] / / ],
[0105] / / enhancers:[], / / Method for performing compose operation with middlewares: const enhancer = compose(applyMiddleware(...middlewares),...enhancers);
[0106] / / reducers:{todos}, / / additional reducers
[0107] / / localStorage:window.localStorage, / / An object for synchronizing local storage; requires setItem and getItem methods; defaults to window.localStorage.
[0108] / / sessionStorage:window.sessionStorage, / / Object for synchronous session storage, requires setItem and getItem methods, defaults to window.sessionStorage
[0109] / / serialize:JSON.stringify, / / Serialization method during storage, defaults to JSON.stringify
[0110] / / deserialize:JSON.parse, / / Parsing method during storage recovery, defaults to JSON.parse
[0111] / / onError:undefined, / / Error handling function, defaults to undefined
[0112] / / onSuccess:undefined, / / Success handling function, defaults to undefined
[0113] });
[0114] export const store = result.store; / / Redux's store object
[0115] export const connect = result.connect; / / Higher-order component used to link the component and the model.
[0116] export const actions = result.actions; / / All methods defined in the model that manipulate data.
[0117] Create a demo.js file containing one of the user-defined data management objects (models). Specifically:
[0118] Define a variable `state` for initializing data; `state` is used to store the data.
[0119] Write functions to manipulate data, such as the `setName` method for synchronous operations and the `async getUser` method for asynchronous operations.
[0120] The code in the demo.js file is as follows:
[0121] export default{
[0122] / **
[0123] Initialize state
[0124] *
[0125] *It is recommended to initialize all states used in the model:
[0126] 1. Using appropriate initial values can prevent errors.
[0127] *2. The data structure provided by the current model can be quickly understood through the state list.
[0128] ** /
[0129] state:{
[0130] name:'Default value',
[0131] user:null,
[0132] syncObj:{
[0133] good:123,
[0134] bar:{
[0135] a:{
[0136] aa:'aa',
[0137] aaa:'aaa',
[0138] aaaa:['a','a1','a2'],
[0139] },
[0140] },
[0141] foo:['f','f1'],
[0142] },
[0143] },
[0144] / **
[0145] Synchronize state to localStorage
[0146] *Defaults to false; two ways to pass values:
[0147] *1. True: All current model states are synchronized.
[0148] *2. [path,path,...] specifies the jsonpath for synchronization. See: https: / / lodash.com / docs / 4.17.15#get
[0149] /
[0150] syncLocal:['syncObj.bar.a.aaaa[1]','syncObj.foo','name','user'],
[0151] / **
[0152] *Configured the same as syncLocal, synchronized to sessionStorage.
[0153] /
[0154] / / syncSession:true,
[0155] / **
[0156] Both synchronous and asynchronous operations should use try-catch blocks to handle errors, and to determine whether to call the handleError method for error handling.
[0157] *The default is true, which processes all processes. You can specify which processes should be handled automatically.
[0158] /
[0159] errorTip:{
[0160] async: false, / / asynchronous hint
[0161] sync:false, / / Synchronization hint
[0162] getUser: 'Failed to retrieve user!', / / getUser has the highest priority for error message.
[0163] },
[0164] / **
[0165] * Successful operation message, defaults to false, same rules as errorTip.
[0166] /
[0167] successTip:{
[0168] async: false, / / asynchronous hint
[0169] sync:false, / / Synchronization hint
[0170] getUser: 'User retrieved successfully!', / / getUser displays the default message "Operation successful"
[0171] setUser:'set user success',
[0172] },
[0173] / **
[0174] *undo, redo
[0175] *default false, two assignment methods:
[0176] *1. true, all methods of the current model will trigger undo and redo history records, and the configuration will use the default value of redux-undo
[0177] *2. object, specify configuration, refer to https: / / github.com / omnidan / redux-undo for details
[0178] *Two new configurations, include and exclude, are added to the redux-undo filter. Generally, only one configuration is needed. If both exist, include takes effect
[0179] *
[0180] *If undoable is configured
[0181] *1. The state data structure will be transformed into: (only affects the value of connect, does not affect the return value of method)
[0182] *demo={
[0183] *future:[]
[0184] *group:null
[0185] *index:4
[0186] *limit:5
[0187] *past:(4)[{…},{…},{…},{…}]
[0188] *present:{name:1618027715626,...}
[0189] *}
[0190] *2. New methods: (do not define the following methods in the model, they will be overwritten)
[0191] *`${modelName}Undo`(demoUndo)
[0192] *`${modelName}Redo`
[0193] *`${modelName}Jump`
[0194] *`${modelName}JumpToPast`
[0195] *`${modelName}JumpToFuture`
[0196] *`${modelName}ClearHistory`
[0197] ** /
[0198] / / undoable:{ / / https: / / github.com / omnidan / redux-undo
[0199] / / include:['setName'],
[0200] / / exclude:['setOptions'], / / include If exclude exists, include will override exclude.
[0201] / / limit:5,
[0202] / / },
[0203] / **
[0204] *Asynchronous debouncing, defaults to true. Asynchronous operations will still execute, but the order of results will be guaranteed.
[0205] *Two parameter passing methods:
[0206] *1. True asynchronous debouncing is enabled for all asynchronous operations.
[0207] *2. ['getUser'] specifies debouncing for the getUser method; other methods do not debounc.
[0208] /
[0209] / / debounce:[
[0210] / / / / 'testAsync',
[0211] / / ],
[0212] / **
[0213] Synchronized methods that return an object or something else will not be merged into the state if the returned value is not an object.
[0214] * Internal ActionType: action_user_setName (action_module_function)
[0215] * @param name Custom parameter
[0216] * @param state Current model state data
[0217] * @returns {{ name}} Returns: 1. The object will be merged with state; 2. falsity, do not handle state
[0218] * /
[0219] setName(name, state) {
[0220] console.log('Synchronous method parameters', name, state);
[0221] return { name};
[0222] },
[0223] setOptions: (options) => {
[0224] console.log('setOptions method called');
[0225] return { options};
[0226] },
[0227] / **
[0228] * Asynchronous method, returns promise
[0229] * Automatically add state.getUserLoading, state.getUserError data in data
[0230] * Internal ActionType: action_user_getUser_resolve action_user_getUser_reject action_user_getUser_padding
[0231] * Set debounce, do debouncing: If the last one is not finished, the result will be discarded, and the last call result will be merged into the state.
[0232] *@param id
[0233] *@param state
[0234] *@returns{Promise<{name:number,age:number}>} The logic for resolving the promise value is the same as that of synchronous methods.
[0235] /
[0236] async getUser(id,state){
[0237] console.log('getUser state',state);
[0238] return new Promise((resolve,reject)=>{
[0239] setTimeout(()=>{
[0240] Math.random()>0.1? resolve({user:{name:Math.random(),age:23}}):reject(new Error('Failed to retrieve user!'));
[0241] },1000);
[0242] });
[0243] },
[0244] testAsync:async(time)=>{
[0245] return new Promise((resolve,reject)=>{
[0246] setTimeout(()=>{
[0247] resolve({asyncResult:`${time} seconds execution result`});
[0248] },time);
[0249] });
[0250] },
[0251] };
[0252] In an embodiment of the embodiment of the application, creating the file in the src / models folder further comprises:
[0253] Creating the models.js file that automatically collects all custom data management objects in the data management module from under the src / models folder.
[0254] The code of the models.js file is:
[0255] / **
[0256] * Use require.context to automatically import all model files
[0257] ** /
[0258] const result = {};
[0259] / / src / models directory, no subfolders
[0260] const req = require.context('. / ', false, / \.js$ / );
[0261] req.keys().forEach(key => {
[0262] if ([
[0263] '. / index.js',
[0264] '. / models.js',
[0265] ].includes(key)) return;
[0266] const model = req(key);
[0267] const name = getModelName(key);
[0268] result[name] = model.default;
[0269] });
[0270] / / src / pages directory, support subfolders
[0271] const reqPages = require.context('.. / ', true, / \.js$ / );
[0272] reqPages.keys().forEach(key => {
[0273] if (!key.endsWith('model.js')) return;
[0274] const model = reqPages(key);
[0275] const name = getModelName(key);
[0276] result[name] = model.default;
[0277] });
[0278] export default result;
[0279] / **
[0280] * Get the module name
[0281] * @param filePath
[0282] * /
[0283] function getModelName(filePath) {
[0284] / / For the case of models / page.js
[0285] let name = filePath.replace('. / ', '').replace('.js', '');
[0286] const names = filePath.split(' / ');
[0287] const fileName = names[names.length - 1];
[0288] const folderName = names[names.length - 2];
[0289] / / For the case of users / model.js
[0290] if (fileName ==='model.js') name = folderName;
[0291] / / For the case of users / center.model.js
[0292] if(fileName.endsWith('.model.js')){
[0293] name=fileName.replace('.model.js',").replace( / \. / g,'-');
[0294] }
[0295] return name.replace( / -(\w) / g,(a,b)=>b.toUpperCase());
[0296] }
[0297] Step S106: Modify the src / App.jsx file in the initialization React project to provide the data storage object `store` to the React project, creating a data management module environment. All business components that need to use the data management module will operate within this created data management module environment. The relevant code is as follows:
[0298] import {Provider} from 'react-redux'; / / Import Redux related utility packages.
[0299] import{store}from'. / models'; / / Introduce models
[0300] import Home from '. / Home'; / / Import the Home component
[0301] function App(){
[0302] return(
[0303] / * Pass the store to the Redux Provider * /
[0304] <Provider store={store}>
[0305] <home / >
[0306] );
[0308] }
[0309] export default App;
[0310] Step S107: Create the src / Home.jsx file.
[0311] In one embodiment of the present invention, creating the src / Home.jsx file includes:
[0312] The higher-order component connect, provided by models exported from index.js, is introduced;
[0313] The Home component uses connect to link with models;
[0314] Retrieve the state data defined in the models;
[0315] Injected into the Home component via props;
[0316] The Home component obtains the injected state data and related action methods for modifying the data through props. The relevant code is as follows:
[0317] import {connect} from '. / models'; / / Import higher-order links to models.
[0318] import{useCallback}from'react';
[0319] / / Use the connect higher-order component to connect with models
[0320] export default connect(state=>({
[0321] / / Retrieve data from the demo module (filename and module name) in the model and inject it into the props of the current component.
[0322] user:state.demo.user,
[0323] }))(function Home(props){
[0324] const{
[0325] user, / / Retrieves the model data injected by connect, user
[0326] action:{demo:demoAction}, / / Retrieves the relevant methods defined in the model; here, it retrieves the methods from the demo module.
[0327] } = props;
[0328] const handleClick = useCallback(() => {
[0329] / / Call the method defined in the model to get the user
[0330] demoAction.getUser();
[0331] }, [demoAction]);
[0332] return (
[0333]
[0334] <button onclick＝{handleclick}>Acquiring a user< / button>
[0335] <pre>
[0336] { / * Show the user data that was fetched * / }
[0337] {JSON.stringify(user,null,2)}
[0338] < / pre>
[0339] );
[0341] });
[0342] Step S108: In the project root directory, execute the start project command: yarn start to start the React project.
[0343] Steps S101-S103 are pre-preparation steps, steps S104-S105 are steps for writing a data management module, steps S106-S107 are steps for how to use the data management module in the project, and step S108 is a step for starting the project.
[0344] Based on the above steps S101-S108, by using the data management method based on the React project proposed by the application, there is no need to write Action, ActionType, Reducer and other template codes, and all data operations are a function (using async function for asynchronous processing), which greatly simplifies the coding work of data management.
[0345] It should be noted that although the steps in the above embodiments are described in a specific order, those skilled in the art can understand that, in order to achieve the effect of the application, the different steps do not have to be executed in such an order, they can be executed simultaneously (in parallel) or in other order, and these changes are within the protection scope of the application.
[0346] Further, the application also provides a data management device based on a React project.
[0347] Referring to the accompanying drawings Figure 2 , Figure 2 is the main structure block diagram of the data management device based on the React project according to an embodiment of the application. As shown in Figure 2As shown, the data management device based on the React project in the embodiment of the application mainly comprises an initialization module 11, an installation module 12, an identification module 13, a first creation module 14, a second creation module 15, a use module 16, a third creation module 17 and a start module 18. The initialization module 11 can be configured to initialize a React project in some embodiments. The installation module 12 can be configured to install the software package needed in the React project. The identification module 13 can be configured to modify the project configuration file in the React project to identify the asynchronous function if the asynchronous function exists in the React project. The first creation module 14 can be configured to create a src / models folder in the root directory of the React project, and the src / models folder is used to write the code of data management. The second creation module 15 can be configured to create a file in the src / models folder. The use module 16 can be configured to modify the src / App.jsx file in the initialized React project, provide the data storage object store to the React project, create an environment of the data management module, and all business components using the data management module are under the environment of the created data management module. The third creation module 17 can be configured to create a src / Home.jsx file. The start module 18 can be configured to execute the start project command: yarn start under the root directory of the project to start the React project.
[0348] In one embodiment, the description of the specific implementation function can be referred to the steps S101-S108.
[0349] The above-mentioned data management device based on the React project is used to execute Figure 1 As shown, the data management device based on the React project in the embodiment of the application mainly comprises an initialization module 11, an installation module 12, an identification module 13, a first creation module 14, a second creation module 15, a use module 16, a third creation module 17 and a start module 18. The initialization module 11 can be configured to initialize a React project in some embodiments. The installation module 12 can be configured to install the software package needed in the React project. The identification module 13 can be configured to modify the project configuration file in the React project to identify the asynchronous function if the asynchronous function exists in the React project. The first creation module 14 can be configured to create a src / models folder in the root directory of the React project, and the src / models folder is used to write the code of data management. The second creation module 15 can be configured to create a file in the src / models folder. The use module 16 can be configured to modify the src / App.jsx file in the initialized React project, provide the data storage object store to the React project, create an environment of the data management module, and all business components using the data management module are under the environment of the created data management module. The third creation module 17 can be configured to create a src / Home.jsx file. The start module 18 can be configured to execute the start project command: yarn start under the root directory of the project to start the React project.
[0350] Those skilled in the art will understand that all or part of the processes in the method of the above embodiment of the present invention can also be implemented by a computer program instructing related hardware. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the various method embodiments described above. The computer program includes computer program code, which can be in the form of source code, object code, executable file, or some intermediate form. The computer-readable storage medium can include any entity or device capable of carrying the computer program code, a medium, a USB flash drive, a portable hard drive, a magnetic disk, an optical disk, a computer memory, a read-only memory, a random access memory, an electrical carrier signal, a telecommunication signal, and a software distribution medium, etc. It should be noted that the content included in the computer-readable storage medium can be appropriately added or removed according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, the computer-readable storage medium does not include electrical carrier signals and telecommunication signals.
[0351] Furthermore, the present invention also provides a control device. For example... Figure 3 As shown, in one embodiment of the control device according to the present invention, the control device includes a processor and a storage device. The storage device can be configured to store a program that executes the data management method based on a React project according to the above-described method embodiments. The processor can be configured to execute the program in the storage device, which includes, but is not limited to, the program that executes the data management method based on a React project according to the above-described method embodiments. For ease of explanation, only the parts related to the embodiments of the present invention are shown; for specific technical details not disclosed, please refer to the method section of the embodiments of the present invention. The control device can be a control device device comprising various electronic devices.
[0352] Furthermore, the present invention also provides a computer-readable storage medium. In one embodiment of the computer-readable storage medium according to the present invention, the computer-readable storage medium can be configured to store a program that executes the data management method based on a React project as described in the above-described method embodiments. This program can be loaded and run by a processor to implement the above-described data management method based on a React project. For ease of explanation, only the parts related to the embodiments of the present invention are shown; for specific technical details not disclosed, please refer to the method section of the embodiments of the present invention. The computer-readable storage medium can be a storage device comprising various electronic devices. Optionally, in the embodiments of the present invention, the computer-readable storage medium is a non-transitory computer-readable storage medium.
[0353] Further, it should be understood that, since the setting of each module is only for illustrating the functional units of the device of the present application, the corresponding physical device of the module can be the processor itself, or a part of the software in the processor, a part of the hardware, or a part of the combination of the software and the hardware. Therefore, the number of each module in the figure is only illustrative.
[0354] Those skilled in the art can understand that each module in the device can be adaptively split or combined. Such splitting or combining of the specific module does not cause the technical solution to deviate from the principles of the present application, and therefore, the technical solution after splitting or combining will fall within the protection scope of the present application.
[0355] So far, the technical solution of the present application has been described in combination with the preferred embodiments shown in the drawings, but those skilled in the art can easily understand that the protection scope of the present application is obviously not limited to these specific embodiments. Those skilled in the art can make equivalent changes or replacements to the related technical features without deviating from the principles of the present application, and the technical solution after the changes or replacements will fall within the protection scope of the present application.
Claims
1. A data management method for React projects, characterized in that, include: Initialize a React project; Install the necessary software packages in the React project; If asynchronous functions exist in the React project, modify the project configuration file in the React project to identify the asynchronous functions; Create a folder named src / models in the root directory of the React project. The src / models folder will be used to write the data management code. Create a file in the src / models folder; Modify the src / App.jsx file in the initialization React project to provide the data storage object store to the React project, and create a data management module environment. All business components that need to use the data management module will be in this data management module environment. Create a file named src / Home.jsx; In the project root directory, execute the command to start the project: yarn start, to start the React project; The software packages required for installation in the React project include: In the project root directory, execute the command `yarn add @ra-lib / model @ra-lib / model-async-function-loader react-redux redux redux-thunk redux-undo` to install the packages `@ra-lib / model`, `@ra-lib / model-async-function-loader`, `react-redux`, `redux`, `redux-thunk`, and `redux-undo`. The `@ra-lib / model` and `@ra-lib / model-async-function-loader` packages are required for secondary wrappers around Redux; the `react-redux`, `redux`, `redux-thunk`, and `redux-undo` packages are required for native Redux. The files created in the src / models folder include: Create an index.js file, specifically as follows: Import all user-defined data management objects (models) into the index.js file in the React.js library; Import the creation function createStoreByModels from the @ra-lib / model package; Call the creation function createStoreByModels, passing in all user-defined data management objects (models); Create the store, connect, and action; The higher-order components used by the store and connect for exporting data management are linked by the model. All methods for manipulating data defined in the action model; Create a demo.js file containing one of the user-defined data management objects (models). Specifically: Define a variable `state` for initializing data; `state` is used to store the data. Write functions to manipulate data.
2. The data management method for React-based projects according to claim 1, characterized in that, Initializing a React project includes: Install the event-driven JavaScript runtime version Node.js 14; Install the package manager yarn; Initialize the React project using the scaffolding tool create-react-app; Enter the initialized project directory and execute the command `yarn eject` to expose the project configuration.
3. The data management method for React-based projects according to claim 1, characterized in that, If asynchronous functions exist in the React project, modify the project configuration file in the React project to identify asynchronous functions, including: Add a loader configuration to config / webpack.config.js in the React.js library, where the loader configuration uses the @ra-lib / model-async-function-loader package.
4. The data management method for React-based projects according to claim 1, characterized in that, Creating files in the src / models folder also includes: Create a models.js file that automatically collects all custom data management objects from the data management module in the src / models folder.
5. The data management method for React-based projects according to claim 1, characterized in that, Creating the src / Home.jsx file includes: The higher-order component connect, provided by models exported from index.js, is introduced; The Home component uses connect to link with models; Retrieve the state data defined in the models; Injected into the Home component via props; The Home component obtains the injected state data and related action methods for modifying the data through props.
6. A data management device based on a React project, characterized in that, include: The initialization module is used to initialize a React project; The installer module is used to install the necessary software packages in the React project. The identification module is used to modify the project configuration file in the React project to identify asynchronous functions if such functions exist. The first creation module is used to create a src / models folder in the root directory of the React project. The src / models folder is used to write data management code. The second creation module is used to create files in the src / models folder; The module is used to modify the src / App.jsx file in the initialization of the React project, provide the data storage object store to the React project, and create an environment for the data management module. All business components that need to use the data management module will be in this data management module environment. The third module is used to create the src / Home.jsx file; The startup module is used to execute the startup command `yarn start` in the project root directory to start the React project; The software packages required for installation in the React project include: In the project root directory, execute the command `yarn add @ra-lib / model @ra-lib / model-async-function-loader react-redux redux redux-thunk redux-undo` to install the packages `@ra-lib / model`, `@ra-lib / model-async-function-loader`, `react-redux`, `redux`, `redux-thunk`, and `redux-undo`. The `@ra-lib / model` and `@ra-lib / model-async-function-loader` packages are required for secondary wrappers around Redux; the `react-redux`, `redux`, `redux-thunk`, and `redux-undo` packages are required for native Redux. The files created in the src / models folder include: Create an index.js file, specifically as follows: Import all user-defined data management objects (models) into the index.js file in the React.js library; Import the creation function createStoreByModels from the @ra-lib / model package; Call the creation function createStoreByModels, passing in all user-defined data management objects (models); Create the store, connect, and action; The higher-order components used by the store and connect for exporting data management are linked by the model. All methods for manipulating data defined in the action model; Create a demo.js file containing one of the user-defined data management objects (models). Specifically: Define a variable `state` for initializing data; `state` is used to store the data. Write functions to manipulate data.
7. A control device, comprising a processor and a storage device, said storage device being adapted to store a plurality of program codes, characterized in that, The program code is adapted to be loaded and run by the processor to perform the data management method for a React-based project as described in any one of claims 1 to 5.
8. A computer-readable storage medium storing a plurality of program codes, characterized in that, The program code is adapted to be loaded and run by a processor to perform the data management method for a React-based project as described in any one of claims 1 to 5.