反应，如何在没有深度克隆的情况下不突变 state？

Question

您的数据存储在 state （可能是 redux 状态）

并且您正在使用 formik 来修改您的数据。

在代码中，

 let { data } = props // from redux state

 // suppose data is somewhat deep like



   // data = {
   //   p1: {
   //     p11: {
   //     },
   //     p12: [{
   //       p122
   //     }, {
   //       p123
   //     }]
   //   },
   //   p2
   // }


   const handleSubmit = (values) => {

     dispatch({
       type: 'setData',
       payload: {
         data: values
       }
     })
   })

 <Formik initialValues={_.cloneDeep(data)} enableReinitialize onSubmit={handleSubmit} />

//减速器看起来像

const reducer = (state={}, action) => {
  return produce(state, (draft) => {
     if (action.type === 'setData') {
         draft.data = action.payload.data
     }
  })
}

请注意，我正在使用_.cloneDeep(data)克隆data ，以防止 state 发生变异。
当数据平坦时，使用{...data}是安全的，但是当数据很深（有对象有对象）时，就不是那么容易了

除了深度克隆还有其他方法吗？ 我想知道immer.js是否可以在这里提供帮助。

Answer 1

我不确定我是否理解这个问题，因为不清楚你为什么首先需要 deepClone，除非你的减速器有副作用并改变了有效载荷而不是 state。 在这种情况下，您也可以在有效负载数据上调用produce ，例如：

const reducer = (state={}, action) => {
  return produce(state, (draft) => {
     if (action.type === 'setData') {
         const dataToStore = produce(action.payload, payloadDraft => {
             payloadDraft.name = payloadDraft.name.toUpperCase()
         })
         draft.data = dataToStore
     }
  })
}