时间戳

首页 > 解决方案 > javascript const 真的是不变的吗？在还原？

javascript - javascript const 真的是不变的吗？在还原？

问题描述

我的商店中有这个减速器，初始状态initialProcessingState是从另一个源文件导入的。

import {
  ACTN_IS_PROCESSING
} from '../config/action-types.js';

import { initialProcessingState } from "./redProcessing-initial.js";

export default function (state = initialProcessingState, action) {
  switch (action.type) {

    case ACTN_IS_PROCESSING:
      return {
        ...state,
        ...action.isProcessing
      }

    default:
      return state;
  }
}

这是源文件中定义的方式：

export const initialProcessingState = {
  keys: [],
  mostRecentStatus: false,
  neverStale: true
}

现在我的商店通过订阅将状态持久化到本地存储中

  store.subscribe(() => {
    updateLocalStorage(store);
  })

像这样...

import { initialProcessingState } from "../reducers/redProcessing-initial.js";

var updateLocalStorage = debounce((store) => {
  const state = store.getState();
  var _state = {
    ...state,
    isProcessing: { ...initialProcessingState }
  };
  localStorage.setItem('reduxState', JSON.stringify(_state))
}, 100);

我的意图是isProcessing用它的初始状态覆盖，如const上面在initialProcessingState.

不幸的是不起作用。因为每一次updateLocalStorage调用的值initialProcessingState都不是初始值，而是后续reducer调用的当前更新状态。

这怎么可能？这是一个const。

我的临时修复涉及JSON.parse(JSON.stringify(initialProcessingState))：

const _initialProcessingState = JSON.parse(JSON.stringify(initialProcessingState));

var updateLocalStorage = debounce((store) => {
  const state = store.getState();
  //this is not the best way
  console.log("updateLocalStorage", "initialProcessingState", initialProcessingState, _initialProcessingState);
  var _state = {
    ...state,
    isProcessing: { ..._initialProcessingState }
  };
  localStorage.setItem('reduxState', JSON.stringify(_state))
}, 100);

以下不足以使其正常工作：

const _initialProcessingState = initialProcessingState;

有人可以帮忙吗？

标签： javascriptecmascript-6reduxredux-thunk

解决方案

const 声明创建对值的只读引用。这并不意味着它持有的值是不可变的，只是不能重新分配变量标识符。例如，在内容是对象的情况下，这意味着可以更改对象的内容（例如，它的属性）。

来源：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

编辑

Object.freeze()正如@Apolo 在他的评论中指出的那样，提及这一点可能很重要。

对象

Object.freeze() 方法冻结一个对象。无法再更改冻结的对象；冻结对象可防止向其添加新属性、删除现有属性、防止更改现有属性的可枚举性、可配置性或可写性，并防止更改现有属性的值。此外，冻结对象还可以防止其原型被更改。

Object.freeze()然而，同样重要的是要注意它没有扩展到冻结对象所拥有的值：

请注意，作为对象的 [对象] 的值仍然可以修改，除非它们也被冻结。

数组

作为一个对象，一个数组可以被冻结；这样做之后，它的元素就不能被改变，也不能从数组中添加或删除任何元素。

编辑部分的来源： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

推荐阅读