清除redux数据(hooks写法)

12 篇文章 0 订阅
1 篇文章 0 订阅

清除redux数据的场景

A页面初始化调用A接口,希望在当前页面生效,跳转页面不保存数据,但redux中已经存有历史数据,所以在页面销毁时清除redux数据。

A页面请求A接口

useEffect(() => {
    initData();
}, [orderCode]);

const initData = async () => {
    setLoading(true);
    const action = await Actions.getData({ current: 1, size: 10, });
    setLoading(false);
    const { type, payload } = action;
    dispatch(action);
    if (type === 'GET_DATA') {
         message.success('请求数据成功-值', payload);
    }
  }

A页面请求A接口action

async function getData(params) {
  const payload = await new dataModel().getData(params);
  return {
    type: GET_DATA,
    payload
  }
}

A页面请求清除A接口数据

useEffect(() => {
    // 初始化数据...    

    return async () => {
      const action = await Actions.clearData();
      dispatch(action);
    }
  }, []);

A页面请求清除A接口action

async function clearData() {
  return {
    type: CLEAR_DATA
  }
}

A页面reducer

import { ACTION_TYPES } from '@/actions';

const INIT_STATE = {
  data: [],
};

export default function dataCenter(state = INIT_STATE, action) {
  let result = { ...state };
  const { type, payload } = action;
  switch (type) {
    // 清空
    case ACTION_TYPES.CLEAR_DATA:
      result.airTicketList = INIT_STATE.data;
      break;
    // 获取
    case ACTION_TYPES.GET_DATA:
      result.data= payload;
      break;
    default:
      result = state;
  }
  return result;
}

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值