在Redux存储中保存数组对象数据可以通过以下步骤实现:
下面是一个示例代码:
// 1. 创建Redux存储
import { createStore } from 'redux';
// 2. 定义初始状态
const initialState = {
data: []
};
// 3. 创建reducer函数
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'SAVE_DATA':
return {
...state,
data: [...state.data, action.payload]
};
default:
return state;
}
};
// 4. 创建action创建函数
const saveData = (data) => {
return {
type: 'SAVE_DATA',
payload: data
};
};
// 5. 连接Redux存储到组件
import { connect } from 'react-redux';
// 6. 在组件中使用action创建函数
class MyComponent extends React.Component {
// ...
handleSaveData = () => {
const data = { name: 'John', age: 25 };
this.props.saveData(data);
}
// ...
}
// 将状态映射到组件的属性
const mapStateToProps = (state) => {
return {
data: state.data
};
};
// 将action创建函数映射到组件的方法
const mapDispatchToProps = (dispatch) => {
return {
saveData: (data) => dispatch(saveData(data))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
这样,当调用handleSaveData
方法时,Redux存储中的数组对象数据将会被更新。你可以根据实际需求来修改和扩展这个示例代码。
腾讯云湖存储专题直播
腾讯云数据湖专题直播
腾讯云存储专题直播
云+社区技术沙龙[第17期]
T-Day
企业创新在线学堂
Techo Day
云+社区技术沙龙第33期
Elastic 中国开发者大会
云+社区技术沙龙[第9期]
领取专属 10元无门槛券
手把手带您无忧上云