Javascript Redux状态未按预期在还原程序中生成

我正在使用React和Redux构建一个简单的联系人应用程序。我的状态对象如下所示：

{
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    }
  ],
  "activeContact": {
    "name": "Peter",
    "phone": "883292300348"
  }
}

{
  "0": {
    "name": "Miguel Camilo",
    "phone": "123456789"
  },
  "1": {
    "name": "Peter",
    "phone": "883292300348"
  },
  "2": {
    "name": "Jessica",
    "phone": "8743847638473"
  },
  "3": {
    "name": "Michael",
    "phone": "0988765553"
  },
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    },
    {
      "name": "123",
      "phone": "123"
    }
  ]
}

我正在尝试构建一个添加联系人功能，该功能将从页面上的输入中获取姓名和号码，并将它们添加到状态中的

联系人

数组中。这就是它的构建方式：

const createStoreWithMiddleware = applyMiddleware()(createStore);
const initialState = {
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    }
  ],
  "activeContact": null
};

ReactDOM.render(
  <Provider store={ createStoreWithMiddleware(reducers, initialState) }>
   <App />
  </Provider>
, document.querySelector('.container'));

ContactsList组件：

class ContactList extends Component {
  renderList() {
    return this.props.contacts.map((contact) => {
      return (
        <li
          key={contact.phone}
          onClick={() => this.props.selectContact(contact)}
          className='list-group-item'>{contact.name}</li>
      );
    });
  }
  render() {
    return (
      <ul className = 'list-group col-sm-4'>
        {this.renderList()}
      </ul>
    );
  }
}

function mapStateToProps(state) {
  return {
    contacts: state.contacts
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ selectContact: selectContact }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(ContactList)

应用程序的index.js，商店的构建位置：

const createStoreWithMiddleware = applyMiddleware()(createStore);
const initialState = {
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    }
  ],
  "activeContact": null
};

ReactDOM.render(
  <Provider store={ createStoreWithMiddleware(reducers, initialState) }>
   <App />
  </Provider>
, document.querySelector('.container'));

我的问题是，当我单击我的添加联系人按钮时，一个新的

contacts

数组被添加到状态中现有的

contacts

数组中，然后出于某种奇怪的原因，我的初始联系人列表被添加到状态的顶层。因此，在我登录

this.props.contacts

时单击“添加联系人”按钮之后（以及出错之前），它看起来如下所示：

{
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    }
  ],
  "activeContact": {
    "name": "Peter",
    "phone": "883292300348"
  }
}

{
  "0": {
    "name": "Miguel Camilo",
    "phone": "123456789"
  },
  "1": {
    "name": "Peter",
    "phone": "883292300348"
  },
  "2": {
    "name": "Jessica",
    "phone": "8743847638473"
  },
  "3": {
    "name": "Michael",
    "phone": "0988765553"
  },
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    },
    {
      "name": "123",
      "phone": "123"
    }
  ]
}

因此，在原始的

联系人

数组中添加了一个新的

联系人

数组，该数组包含原始值和新值。而原始的

联系人

阵列保持不变

我不知道这是为什么。最初我认为传递给我的reducer的

状态

对象是完整状态，但它似乎只是我状态的

联系人

部分，所以我修改了我的object.assign（）调用，将其从

联系人：state.contacts.concat（）更改为
联系人：state.concat（）
但这仍然无法解决问题

我希望返回到ContactsList组件的状态如下所示：

{
  "contacts": [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    },
    {
      "name": "this is the new contact",
      "phone": "123"
    }
  ],
  "activeContact": {
    "name": "Peter",
    "phone": "883292300348"
  }
}

仅在原始状态下，将一个额外联系人添加到我的
联系人
阵列中。你知道我的实现有什么问题吗？感谢您的帮助
 你应该像这样改变你的状态

export default function (state = { contacts : [] }, action) {

  switch (action.type) {
    case 'ADD_CONTACT':
      console.log(state);
      return {
       ...state,
       contacts: [...state.contacts, ...contacts]
      }
    default:
      return state;
  }
}

问题是如何分配初始状态。由于您使用组合减速机，其中一个键为contacts，因此contacts减速机将

[
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    }
  ],

而你却期望它是

{
  contacts: [
    {
      "name": "Miguel Camilo",
      "phone": "123456789"
    },
    {
      "name": "Peter",
      "phone": "883292300348"
    },
    {
      "name": "Jessica",
      "phone": "8743847638473"
    },
    {
      "name": "Michael",
      "phone": "0988765553"
    }
  ]
}

所以你需要做的改变是

export default function (state = [], action) {

  switch (action.type) {
    case 'ADD_CONTACT':
      console.log(state);
      return state.concat([
          {
            name: action.payload.name,
            phone: action.payload.phone
          }
      ])
    default:
      return state;
  }
}

一旦您进行了上述更改，一切都会正常进行
您是否使用组合减速机，如果是，请添加该部分too@ShubhamKhatri他补充道：这确实有效！非常感谢你。虽然状态不应该是不可变的，并且reducer只返回一个副本吗？
state.concat
是否返回一个新对象，而不是一个变异的
状态
？concat返回一个新数组，而不变异原始数组