Question

我正在用React来学习Redux。我知道要重新渲染树，您必须订阅一些功能并调度操作，我已经完成了

let render = store => {
    ReactDOM.render(
        <Provider store={store}><App /></Provider>,
        document.getElementById('root')
    )
}

render(store)

store.subscribe( () => {
    render(store)
})

调度工作正常，我不会显示代码，因为这与问题无关，因为问题在于我正试图使用connect从redux存储中加载数据的时间，有两种方法，然后将其发送到商店，首先：

state.articles.push({ title: action.article.title, id: action.article.id })
return state

秒：

return Object.assign({}, state, {
            articles: state.articles.concat({
                id: action.article.id,
                title: action.article.title
            })
        });

问题是只有第二个有效，说有效是指它更新了LIST组件并映射了redux状态

可能需要了解问题， LIST 组件：

const mapStateToProps = state => {
  return { articles: state.root.articles }
}

const ConnectedList = ({ articles }) => (
  <ul className="list-group list-group-flush">
    {articles.map(el => (
      <li className="list-group-item" key={el.id}>
        {el.title}
      </li>
    ))}
  </ul>
)

export default connect(mapStateToProps)(ConnectedList)

Answer 1

无法使用array.push（），因为 Redux 需要新的状态，需要全新的整体状态来更新您已订阅的组件，因此在执行 push 函数，我们保持相同的状态，我们唯一要更改的是数组在其状态内，因此解决方案是创建** new对象并与旧对象合并，该对象将具有新数组：D 一些代码：

 let absolutelyNewState = Object.assign({}, state, {
            articles: state.articles.concat({
                id: action.article.id,
                title: action.article.title
            })
 })

 return absolutelyNewState

Redux不更新组件

1 个答案: