反应，如何在没有深度克隆的情况下不变异状态？

Question

数据存储在一个状态(可能是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} />

// reducer类似于

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

请注意，我正在使用_.cloneDeep(data)克隆data，以防止状态发生变化。

当数据是扁平的时，使用{...data}是安全的，但当数据很深时(拥有具有对象的对象)，就没有那么容易了

有没有比深度克隆更好的方法？我想知道immer.js能不能帮上忙。

Answer 1

我不确定我是否理解了这个问题，因为它不清楚为什么你首先需要deepClone，除非你的reducer有副作用，改变有效负载而不是状态。在这种情况下，您也可以对有效负载数据调用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
     }
  })
}