Question

这是我在实际应用中遇到的问题的简单复制。 https://jsfiddle.net/zqb7mf61/

基本上，如果单击“更新待办事项”按钮，则文本将从“洁净室”变为“获取牛奶”。“洁净室”是减速器初始状态中的值，然后在我的React组件中，实际上，我尝试克隆状态并将其克隆以将其值更改为“获取牛奶”（第35/36行）。令人惊讶的是，即使我不尝试对其进行突变，初始状态本身也已发生了突变（如该行所示）也是13）。

我想知道为什么Object.assign无法用于redux。

这是jsFiddle中的代码。

REDUX

const initState = {
    task: {id: 1, text: 'Clean Room'}
}

// REDUCER
function todoReducer (state = initState, action) {
  switch (action.type) {
   case 'UPDATE_TODO':
        console.log(state)
        let newTodo = Object.assign({}, state)  // here i'm trying to not make any changes. But i am surpise that state is already mutated.
      return newTodo
    default:
        return state;
  }
}

// ACTION CREATORS:
function updateTodo () {
    return {type: 'UPDATE_TODO'};
}


// Create Store
var todoStore = Redux.createStore(todoReducer);

反应成分

//REACT COMPONENT
 class App extends React.Component{
    _onSubmit = (e)=> {
    e.preventDefault();
    let newTodos = Object.assign({}, this.props.todos)  // here i clone the redux state so that it will not be mutated, but i am surprise that it is mutated and affected the reducer.
    newTodos.task.text = 'Get Milk'
    console.log(this.props.todos)
    this.props.updateTodo();
  }

    render(){
    return (
        <div>
        <h3>Todo List:</h3>
        <p> {this.props.todos.task.text} </p>

        <form onSubmit={this._onSubmit} ref='form'>
          <input type='submit' value='Update Todo' />
        </form>      

      </div>
     );
  }
 }

// Map state and dispatch to props
function mapStateToProps (state) {
    return {
    todos: state
    };
}

function mapDispatchToProps (dispatch) {
    return Redux.bindActionCreators({
    updateTodo: updateTodo
  }, dispatch);
 }
  // CONNECT TO REDUX STORE
 var AppContainer = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

您在组件中的两个减速器中都使用Object.assign。此函数仅复制对象内的第一级变量。您将获得一个新的主要对象，但在第二个深度处对这些对象的引用仍然相同。

例如您只需将引用复制到task对象周围，而不是实际创建新的task对象。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Deep_Clone

除此之外，最好不要将整个状态加载到组件中并以不同的方式处理操作。让我们暂时解决这个问题。您将必须在onSubmit中创建一个新的任务对象，而不是为对象引用分配新的文本。看起来像这样：

newTodos.task = Object.assign({}, newTodos.task, {text: 'Get Milk'})

此外，要实际更新商店，您现在必须将reducer修改为当前状态，将其分配给新状态。此新行应如下所示：

let newTodo = Object.assign({}, action.todos)

即使使用Object.assign

1 个答案: