在 Redux 中的应用状态中添加大量数据

2020-10-16 08:00:00 · 飞浪

Redux 存储可以存储无限量的数据，可供多个组件使用。本指南介绍如何在 React Redux 应用状态中添加大量数据。

介绍

Redux 存储是全局状态，用于存储您想要在多个组件中使用的数据，而无需在组件树的每个级别上钻取 props。随着应用程序变得越来越大和复杂，您可能希望在 Redux 存储中存储大量数据并在组件内访问它。Redux 存储对存储的数据量没有限制，因此您几乎可以使用它来存储几乎任何东西，包括大 JSON 数据、表格形式的数据等。本指南将演示如何在 React Redux 应用状态中添加大量数据。

创建 Redux 样板

在空的 Create-React-App React-Redux 项目中，使用根目录内名为store.js的文件中以下代码设置一个简单的存储和减速器。

      import { createStore} from 'redux';
const initailState={
    data:'lorem ipsum',
}
const rootReducer=(state=initailState,action)=>{
    switch(action.type){
        case 'ADD_DATA':
            return{
                ...state,
                data: action.payload
            }
        default:
            return state;
    }
}

export default createStore(rootReducer)
    

接下来，将您的应用包装在Provider组件周围，并将store作为props传递，以便此Provider组件内的所有组件都可以使用index.js内的store。

      import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux';
import store from './store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();
    

商店最初将包含一些简短而简单的数据。接下来，创建一个文件action.js并创建一个具有ADD_DATA类型操作的操作创建器。它还包含一个对象addData，该对象将操作类型和有效负载属性连接到通过dispatch()方法传递的数据。

      const data='new data';
export const ADD_DATA = "ADD_DATA";
export const addData = {
      type: ADD_DATA,
      payload: data
};
export default addData;
    

最后，将store和dispatch()连接到一个可以分派某些动作并将数据附加到全局状态的组件。

      import React,{useState} from 'react';
import {connect} from 'react-redux'
import {addData} from './action';
import './App.css';

function App({addData,data}) {

  return (
    <div className="App">
      <h1>App</h1>
      <button onClick={addData}>Add Data</button>
    </div>
  );
}

const mapStateToProps=(state)=>({ data:state.data })

const mapDispatchToProps = (dispatch) => {
  return {
    addData: ()=> dispatch(addData)
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(App);
    

应用组件会呈现一个简单的按钮，用于触发或分派ADD_DATA操作。分派此操作时，您会将一些简单数据添加到全局存储的状态中。

创建大型 JSON 数据

下一步是创建一个data.js文件，将虚拟数据放入其中进行测试。在根目录中创建一个名为data.js的新文件，并在其中添加一些大量数据。该示例使用在线模拟数据生成工具Mockaroo创建的 1,000 个条目的大型 JSON 数据。您可以使用相同的工具生成任何类型的大型数据或使用您自己的数据。在data.js文件中，复制并粘贴大型 JSON 数据并将其导出为对象。

      export default [
	{
      "id": 1,
      "first_name": "Zackariah",
      "last_name": "Rembaud",
      "email": "zrembaud0@usatoday.com",
      "gender": "Male",
      "ip_address": "40.23.171.141"
    },
    ...
]
    

通过使用组件顶部的import关键字，可以像常规对象一样导入这些数据，从而可以在应用程序的任何位置使用。

      import data from './data.js';
    

在状态中添加大量数据

导入action.js文件里面的大数据，并将这些数据传递给addData对象里面的payload属性。

      import data from './data.js';

export const ADD_DATA = "ADD_DATA";
export const addData = {
      type: ADD_DATA,
      payload: data
};
export default addData;
    

现在，您可以从应用组件中调度ADD_DATA操作，并将包含数千个条目的大型 JSON 数据添加到应用的全局存储状态中。单击“添加数据”按钮，您可以检查存储状态中是否包含此大型 JSON 数据。因此，您可以通过调度通过 Reducer 将数据存储在 Redux 存储中的操作，在应用状态中添加任意数量的数据。

分析大型写入操作

存储一行数据或一千个复杂 JSON 对象条目对 Redux 来说没有区别，因为您的 Redux 存储与存储在其中的数据量无关。单击“添加数据”按钮时，将分派ADD_DATA操作。这会在存储中添加大量数据，而不会出现任何闪烁或 UI 延迟，这表明在应用状态下添加大量数据时没有性能差异。您可以尝试使用更大的数据集，但结果是一样的。

为了进行更详细的分析，您可以使用 Google Chrome 的 Lighthouse 来评估您的应用的性能，执行此操作后生成一份应用报告，一个使用简单数据，另一个使用大量 JSON 数据，然后比较两者的性能报告。您会发现两者的性能几乎相同，这表明添加大量数据不会影响您的应用的性能。

结论

Redux 存储对存储数据的大小没有任何限制。调度执行此操作的操作不会降低应用的性能，因此您可以安全地在应用的状态中存储任意数量的数据。但是，如果您在应用状态中存储大量数据，有时您可能希望通过在 DOM 上渲染它来向用户显示它。在这种情况下，您可能需要使用延迟加载等技术来提高应用的性能，同时仍在应用上提供所有内容。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 Redux 中的应用状态中添加大量数据

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { createStore} from 'redux'; const initailState={ data:'lorem ipsum', } const rootReducer=(state=initailState,action)=>{ switch(action.type){ case 'ADD_DATA': return{ ...state, data: action.payload } default: return state; } } export default createStore(rootReducer)

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import {Provider} from 'react-redux'; import store from './store'; ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') ); serviceWorker.unregister();

import React,{useState} from 'react'; import {connect} from 'react-redux' import {addData} from './action'; import './App.css'; function App({addData,data}) { return ( <div className="App"> <h1>App</h1> <button onClick={addData}>Add Data</button> </div> ); } const mapStateToProps=(state)=>({ data:state.data }) const mapDispatchToProps = (dispatch) => { return { addData: ()=> dispatch(addData) } } export default connect(mapStateToProps,mapDispatchToProps)(App);

export default [ { "id": 1, "first_name": "Zackariah", "last_name": "Rembaud", "email": "zrembaud0@usatoday.com", "gender": "Male", "ip_address": "40.23.171.141" }, ... ]