如何在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);