如何在ES5 Redux reducer中初始化默认数据？ [英] How to initialize default data in ES5 Redux reducer?

问题描述

暂时我不能使用ES6 / ES2015而且我坚持使用ES5来编写Redux减速器。由于reducer的state参数必须是不可变的，即使它是未定义的，我想出了以下模式：

For the time being I can't use ES6/ES2015 and I'm stuck with ES5 for writing Redux reducers. Since the state parameter of a reducer has to be immutable, even when it's undefined, I came up with the following pattern:

function myState( state, action ) {
    if ( typeof state === 'undefined' ) {
        return myState( { value1: 'foo', value2: 'bar' }, action );
    }
    // actual state calculation here
}

任何关于如何使用ES5确保默认值的替代建议或意见？

Any alternative suggestions or comments on how to ensure a default value with ES5?

编辑：经过一些问题和建议：我做一个递归的原因呼吁是我非常认真地对待状态是不可改变的。因此，即使 state 参数是 undefined ，我也不会更改参数变量本身。我是否过度使用不变性？

After some questions and suggestions: the reason I do a recursive call is that I take the "state is immutable" very seriously. So even when the state parameter is undefined, I don't change the parameter variable itself. Am I taking the immutability too far?

推荐答案

Redux不会强制您使用默认参数语法。它只关心当它给你 undefined 作为状态时，你会返回其他内容，以便你的应用程序能够使用初始状态树启动。

Redux doesn’t force you to use the default argument syntax. It only cares that when it gives you undefined as the state, you return something else so that your app is able to boot up with an initial state tree.

ES6中的这个函数：

This function in ES6:

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state + 1
  default:
    return state
  }
}

相当于此功能在ES5中：

Is equivalent to this function in ES5:

function counter(state, action) {
  if (state === undefined) {
    state = 0
  }

  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state + 1
  default:
    return state
  }
}

验证这一点的好方法是通过Babel REPL 运行此代码。

A nice way to verify this is to run this code through the Babel REPL.

我做递归调用的原因是我非常认真地对待状态是不可变的。所以即使state参数未定义，我也不会更改参数变量本身。

The reason I do a recursive call is that I take the "state is immutable" very seriously. So even when the state parameter is undefined, I don't change the parameter variable itself.

不需要递归调用这里。我认为你的问题可能包含一些关于突变和参考分配之间区别的混淆。

There is no need for a recursive call here. I think your question may contain some confusion about the difference between mutation and reference assignment.

当你写

var x = { lol: true }
x.lol = false

您变异 x 对象。这是Redux不允许的。

you are mutating the x object. This is what Redux doesn’t allow.

但是当你写的时候

var x = { lol: true }
x = { lol: false }

原始对象保持不变。 x 绑定（也称为变量）只是启动指向另一个对象。

the original object stays intact. x "binding" (also known as a "variable") just starts pointing at a different object.

Redux并不关心你是否改变 state 参数引用的内容。它是您的功能的本地。无论您是否退回，只要您不改变实际对象或其中的任何对象，就更改参考精确。

Redux doesn’t care if you change what state argument refers to. It is local to your function. Whether you return it or not, changing the reference fine as long as you don’t mutate the actual objects or any objects inside it.

只是更改变量引用的内容不会改变对象：

Just changing what the variable refers to does not mutate the objects:

// good: local variable called "state" refers to a different number
state = state + 1

// good: local variable called "state" refers to a different array
state = state.concat([42])

// good: local variable called "state" refers to a different string
state = state + ", lol"

然而，在对象本身内部更改或者链接到的对象，无论是否深入，都是一种变异，Redux不允许这样做：

However changing something inside the object itself, or objects it links to, whether deeply or not, is a mutation, and is not allowed by Redux:

// bad: object that local variable "state" refers to has been mutated
state.counter = state.counter + 1

// bad: object that local variable "state" refers to has been mutated
var sameObjectAsState = state
state.counter = state.counter + 1

// bad: array that local variable "state" refers to has been mutated
state.push(42)

// bad: array that local variable "state" refers to has been mutated
var sameArrayAsState = state
sameArrayAsState.push(42)

// bad: object that is linked from the object that local variable "state" refers to has been mutated
state.something.deep.counter = 42

// bad: object that is linked from the object that local variable "state" refers to has been mutated
var somethingDeep = state.something.deep
somethingDeep.counter = 42

这篇关于如何在ES5 Redux reducer中初始化默认数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！