Reactjs/Redux在redux操作完成时创建通知

// 定义action类型
const CREATE_NOTIFICATION = "CREATE_NOTIFICATION";

// 创建action创建函数
const createNotification = (message, type) => {
  return {
    type: CREATE_NOTIFICATION,
    payload: {
      message,
      type
    }
  };
};

// Redux reducer
const notificationReducer = (state = [], action) => {
  switch (action.type) {
    case CREATE_NOTIFICATION:
      return [...state, action.payload];
    default:
      return state;
  }
};

// React组件
const NotificationComponent = ({ notifications }) => {
  return (
    <div>
      {notifications.map((notification, index) => (
        <div key={index}>
          <span>{notification.message}</span>
          <span>{notification.type}</span>
        </div>
      ))}
    </div>
  );
};

// 使用connect函数将通知信息从状态中提取出来
const mapStateToProps = state => {
  return {
    notifications: state.notifications
  };
};

// 将Redux状态和React组件连接起来
const ConnectedNotificationComponent = connect(mapStateToProps)(
  NotificationComponent
);