Question

我有一个问题。如何在嵌套对象中更新我的值？

所以我的Redux状态如下：

const initialState = {
    elements: [],
    selectedElement: {},

};

在元素数组中，我将使用如下结构存储我的“元素”：

   {
        id: 3243,
        elemType: 'p',
        content: 'some example content',
        style: {
            fontSize: 30,
            color: "red",
            textDecoration: "underline",
            fontFamily: "Arial"
        }
    }

现在我想改变风格的价值观。也许fontSize，也许是颜色......取决于选择哪个属性。

我已经创建了动作创建器，它为我提供了这些更改的id，属性和值..但问题是我不知道如何在reducer中编写代码：（

行动创作者

   export const updateElement = (property, value, id) => {
    return {
        type: 'UPDATE_ELEMENT',
        property,
        value,
        id
    }
}

减速

const {id, elemType, content, style, type, selected, property, value} = action;

        case 'UPDATE_ELEMENT':
                const elementForUpdate = state.elements.find(element => element.id === id);
                console.log(id, property, value);
                return ...?

Answer 1

简而言之，您必须保持immutability。在您的情况下，您必须确保：

复制import java.io.IOException; import java.io.InputStream; import java.util.Arrays; /** * An efficient stream searching class based on the Knuth-Morris-Pratt algorithm. * For more on the algorithm works see: http://www.inf.fh-flensburg.de/lang/algorithmen/pattern/kmpen.htm. */ public class StreamSearcher { private byte[] pattern_; private int[] borders_; // An upper bound on pattern length for searching. Results are undefined for longer patterns. @SuppressWarnings("unused") public static final int MAX_PATTERN_LENGTH = 1024; StreamSearcher(byte[] pattern) { setPattern(pattern); } /** * Sets a new pattern for this StreamSearcher to use. * * @param pattern the pattern the StreamSearcher will look for in future calls to search(...) */ public void setPattern(byte[] pattern) { pattern_ = Arrays.copyOf(pattern, pattern.length); borders_ = new int[pattern_.length + 1]; preProcess(); } /** * Searches for the next occurrence of the pattern in the stream, starting from the current stream position. Note * that the position of the stream is changed. If a match is found, the stream points to the end of the match -- i.e. the * byte AFTER the pattern. Else, the stream is entirely consumed. The latter is because InputStream semantics make it difficult to have * another reasonable default, i.e. leave the stream unchanged. * * @return bytes consumed if found, -1 otherwise. */ long search(InputStream stream) throws IOException { long bytesRead = 0; int b; int j = 0; while ((b = stream.read()) != -1) { bytesRead++; while (j >= 0 && (byte) b != pattern_[j]) { j = borders_[j]; } // Move to the next character in the pattern. ++j; // If we've matched up to the full pattern length, we found it. Return, // which will automatically save our position in the InputStream at the point immediately // following the pattern match. if (j == pattern_.length) { return bytesRead; } } // No dice, Note that the stream is now completely consumed. return -1; } /** * Builds up a table of longest "borders" for each prefix of the pattern to find. This table is stored internally * and aids in implementation of the Knuth-Moore-Pratt string search. * <p> * For more information, see: http://www.inf.fh-flensburg.de/lang/algorithmen/pattern/kmpen.htm. */ private void preProcess() { int i = 0; int j = -1; borders_[i] = j; while (i < pattern_.length) { while (j >= 0 && pattern_[i] != pattern_[j]) { j = borders_[j]; } borders_[++i] = ++j; } } }数组。
复制更新的元素对象。
复制更新元素的elements对象。

您可以使用一个style完成所有这些：

map

Javascript Redux更新嵌套对象属性值

1 个答案: