时间戳

首页 > 解决方案 > Redux 不更新组件

javascript - Redux 不更新组件

问题描述

我正在用 react 来学习 redux。我知道要重新渲染树，你必须订阅一些函数并调度动作，我已经这样做了

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

render(store)

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

调度工作完美，我不会显示代码，因为问题在于我使用connect从redux存储加载数据的时间并不重要，并且有2种方法可以调度到存储， 第一的：

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)

标签： javascriptreactjsredux

解决方案

没有办法使用 array.push()，因为Redux需要新的状态，全新的整体状态来更新你订阅的组件，所以当我们执行推送功能时，我们保持相同的状态，我们唯一改变的就是是其状态内部的数组，因此解决方案是创建 **new 对象并与旧对象联合，该对象将具有新数组：D 一些代码：

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

 return absolutelyNewState

推荐阅读