当前位置：首页 > news >正文

React15 - 在redux应用中数据存储位置探讨

news 2026/3/27 0:34:44

在React 15 + Redux的架构中，数据存储位置的选择主要遵循以下原则。针对你的场景，我来详细分析：

应该存储在 Redux store 中的数据

1. 表格列表数据

// 应该放在 Redux 中
{tableData: {list: [...],      // 表格数据total: 100,       // 总条数loading: false,   // 加载状态pagination: {     // 分页信息current: 1,pageSize: 10}}
}

原因：

多个组件可能依赖这些数据
需要跨页面/组件共享
数据获取后可能需要缓存

2. 弹窗表单提交后的数据（如果需要全局展示）

新添加的数据如果立即在表格中显示
可能被其他组件使用的表单提交结果

应该存储在组件 state 中的数据

1. 弹窗的 UI 状态

class PageComponent extends React.Component {state = {modalVisible: false,  // 弹窗显示状态confirmLoading: false, // 提交按钮加载状态formData: {}          // 临时表单数据（如果不需要全局保存）}
}

原因：

弹窗的显隐是纯粹的 UI 状态
只影响当前组件，不需要共享

2. 表单临时数据

state = {formValues: {name: '',age: '',email: ''}
}

原因：

表单填写是临时行为
取消弹窗后这些数据应该被清除
只有提交成功后的数据才需要存入 Redux

实际代码示例

import React from 'react';
import { connect } from 'react-redux';
import { fetchTableData, addTableRow } from './actions';class TablePage extends React.Component {state = {modalVisible: false,formData: {name: '',age: '',email: ''},submitting: false};componentDidMount() {// 获取表格数据 - 存入 Reduxthis.props.fetchTableData();}// 处理表单输入变化 - 存在组件 statehandleInputChange = (e) => {this.setState({formData: {...this.state.formData,[e.target.name]: e.target.value}});};// 提交表单 - 成功后存入 ReduxhandleSubmit = () => {this.setState({ submitting: true });this.props.addTableRow(this.state.formData).then(() => {this.setState({modalVisible: false,formData: {},  // 清空表单数据submitting: false});}).catch(() => {this.setState({ submitting: false });});};// 关闭弹窗 - 清除临时数据handleCancel = () => {this.setState({modalVisible: false,formData: {}  // 取消时清空表单});};render() {// 表格数据来自 Reduxconst { tableData, loading } = this.props;// UI 状态来自组件 stateconst { modalVisible, formData, submitting } = this.state;return (<div>{/* 表格组件 - 使用 Redux 数据 */}<Table dataSource={tableData.list}loading={loading}pagination={tableData.pagination}/>{/* 添加按钮 */}<Button onClick={() => this.setState({ modalVisible: true })}>添加数据</Button>{/* 弹窗表单 - 使用组件 state */}<Modalvisible={modalVisible}onCancel={this.handleCancel}onOk={this.handleSubmit}confirmLoading={submitting}><Form><Input name="name"value={formData.name}onChange={this.handleInputChange}/>{/* 其他表单项 */}</Form></Modal></div>);}
}const mapStateToProps = (state) => ({tableData: state.tableData,loading: state.loading
});const mapDispatchToProps = {fetchTableData,addTableRow
};export default connect(mapStateToProps, mapDispatchToProps)(TablePage);

核心原则

共享数据 → Redux
- 表格数据（多个组件可能使用）
- 用户信息（全局需要）
- 应用配置（跨页面共享）
临时数据 → 组件 state
- 弹窗显隐状态
- 表单输入值（未提交前）
- 组件内部的加载状态
需要考虑的因素
- 数据生命周期：页面关闭后是否需要保留
- 使用范围：是否被多个组件使用
- 更新频率：高频更新的 UI 状态适合放在本地 state