调度动作时的Redux状态突变

Question

我有一个类似

的表格

使用此onChange编辑数量时

program >> combined.log 2>&1 2>> error.log

我运行以下代码

onChange={this.handleInputChange.bind(null, cellInfo)}

首先要获取存储中的数据，然后反映您更改的值，然后通过操作handleInputChange = (cellInfo, event) => { let data = { ...this.props.Data }; data[cellInfo.index][cellInfo.column.id] = parseInt(event.target.value); this.props.APISummaryData(data); }; 和this.props.APISummaryData(data);对其进行更新，都给出相同的状态突变错误。

这是减速器

this.props.APISummaryData({ ...data });

如果我在DevTools内部的Redux中手动调度一个动作

case types.API_SUMMARY_DATA:
    return {
        ...state,
        Summary: {
            ...state.Summary,
            Data: action.Summary
    }
};

这是动作

{
  type: 'API_SUMMARY_DATA',
  Summary: [
    {
      cusip: '019I',
      quantity: 55,
    }
  ]
}

我没有收到任何错误，并且数据已更新。我很困惑在这个方案中我在哪里进行状态突变？

注意：可能我没有共享一些在这里必须看的重要代码，所以请让我知道，我将与您分享。

确切错误

Answer 1

我假设您使用的是Redux Starter Kit中的 let data = { ...this.props.Data }; data[cellInfo.index][cellInfo.column.id] = parseInt(event.target.value); ，它默认情况下会设置一个变异检查中间件。好！这意味着变异检查器可以正确执行其工作。

这些行在变异：

{...}

那是因为{type: "API_SUMMARY_DATA", payload: {index, columnId, inputValue}}对象散布运算符会执行 shallow 副本，而不是深层副本。 This is a very common mistake。

我个人建议发送类似以下内容的操作

import socketserver import threading HEADERSIZE = 10 bufferFull = False buffer = "" def recieveData(sock): full_msg = "" new_msg = True sock = sock print(type(sock)) while True: msg = sock.recv(16) if new_msg: #print(f"new message length: {msg[:HEADERSIZE]}") msglen = int(msg[:HEADERSIZE]) new_msg = False full_msg += msg.decode("utf-8") if len(full_msg) - HEADERSIZE == msglen: #print("full message recieved") #print(full_msg[HEADERSIZE:]) return full_msg[HEADERSIZE:] new_msg = True full_msg = '' break def inputThread(id): #print(connections[id].req) #print(type(connections[id].req)) while True: data = recieveData(connections[id].req) buffer = data bufferFull = True #lists to keep track of the connections and the treads connections = [] threads = [] class Con: def __init__(self, req, type, id): self.req = req self.type = type self.id = id class MyTCPHandler(socketserver.BaseRequestHandler): def handle(self): #when a request is received create a new connection object storing #the request itself, the type sent initially with the request (INPUT or OUTPUT) #and the ID of the connection gotten from the length of the connections list req = self.request type = recieveData(self.request) id = len(connections) print("REQ: " + str(req)) print("TYPE: " + str(type)) print("ID: " + str(id)) c = Con(req, type, id) connections.append(c) if(connections[id].type == "INPUT"): t = threading.Thread(target=inputThread, args=(id,)) threads.append(t) t.start() else: t = threading.Thread(target=outputThread, args=(id,)) threads.append(t) t.start() if __name__ == "__main__": HOST, PORT = "localhost", 9999 # Create the server, binding to localhost on port 9999 server = socketserver.TCPServer((HOST, PORT), MyTCPHandler) # Activate the server; this will keep running until you # interrupt the program with Ctrl-C server.serve_forever()

然后使用reducer进行所有更新。

此外，如果您使用的是Redux入门套件you can use our createReducer() function to write "mutative" code in the reducer that actually does immutable updates。