react redux实现自动保存本地存储函数

创建自动更新函数：

./AuthUpdateLocalStorageFn.js

/**
 * @说明 自动更新本地存储函数 或 返回当前本地存储的状态数据
 * @param {*} type 获取数据方式   获取/更新
 * @param {*} state 状态数据
 * @returns 状态数据
 */const AuthUpdateLocalStorageFn = (type, state) => {
  if (type === "update") {
    // 更新本地存储
    localStorage.setItem("_state", JSON.stringify(state))
  } else if (type === "get") {
    // type为“get”参数时，充当首次加载state，与本地存储的数据与当前默认状态数据结合（本地数据替换当前数据）
    return { ...state, ...JSON.parse(localStorage.getItem('_state')) || {} }
  }
}
export default AuthUpdateLocalStorageFn

使用方式：

./reducer.js

import AuthUpdateLocalStorageFn from "./authUpdateLocalStorage";
// 定义默认数据
const defaultState = {
  num: 0,
  // 全局按钮状态
  btnState: false
}

//AuthUpdateLocalStorageFn 当不传参数时，充当获取当前本地存储信息
const reducer = (state = AuthUpdateLocalStorageFn("get", defaultState), action) => {
  const newState = JSON.parse(JSON.stringify(state));
  switch (action.type) {
    // state num数据实现累加操作
    case CUMULATIVE:
      newState.num = Number(newState.num) + Number(action.value)
      newState.btnState = false;
      break;
    // 更改全局按钮的状态 btnState为true时，全局按钮实现loging动画
    case CHANGE_BTN_STATE:
      newState.btnState = action.value || true;
      break;
    default:
      break;
  }
  // 所有操作都完成时，自动执行更新状态动作
  AuthUpdateLocalStorageFn("update", newState)  return newState
}
export default reducer

实现思路：在reducer模块的返回函数中，最终返回state是，做统一数据处理，完成同步本地存储功能，并且在赋值默认值时，优先考虑本地存储中的数据作为介质。

声明：刚开始接触redux，我菜，只是自己的想法，不要喷我