时间戳

首页 > 解决方案 > 更新 Redux 存储时反应组件不重新渲染

javascript - 更新 Redux 存储时反应组件不重新渲染

问题描述

我正在尝试创建一个切换来收藏卡片组件，以便它呈现在我的 Favorites.js 组件中。我正在使用 Redux 来存储状态，但是当我调度一个操作以从存储中添加或删除它们时，组件不会呈现。我想我正在改变数组的状态。

这是减速器：

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


      switch(action.type) {
        case 'ADD_FAVORITE':
        return state.concat(action.data);
        case 'SUB_FAVORITE':
        return state.filter(state => state.name !== action.data.name);
        default:
          return state;
      }
    }

我尝试使用 Object.assign 创建一个新数组，但由于传递到我的状态的数据本身在一个数组中，我不能使用 store.getState() 将它们映射到我的组件中。数组嵌套在自身内部。

这是我在 onClick 上运行以调度操作的函数：

toggleFavorites(e) {
    if
    (store.getState().includes(this.props.data))
  {
    console.log(this.props.data.name + ' removed from favorites');
    store.dispatch({type: 'SUB_FAVORITE', data: this.props.data});

  }
    else{

    console.log(this.props.data.name + ' added to favorites');
    store.dispatch({type: 'ADD_FAVORITE', data: this.props.data});
  }

This.props.data 是通过引用 JSON 对象中的数组并将其映射到我的卡片组件中传递的

这是我正在渲染的卡片组件：

render() {
    let {name, description, url , screenshot} = this.props.data;
    return (
      <div className="cardComponent">
        <div className="CTA-container">
          <div className="CTA-wrapper">
            <div onClick={() => this.toggleFavorites(this.props.data)}className="CTA-icon"><IconComponent icon="favorite"/></div>
            <a href={url} className="CTA-icon" target="_blank"><IconComponent icon="link"/></a>
        </div>
      </div>
      <img src={screenshot} alt="" className="cardComponent_img"/>
      <a href={url} className="cardComponent_name" target="_blank">{name}</a>
      <p className="cardComponent_description">{description}</p>

      </div>

我将这些卡片组件渲染到 Favorites.js 组件中，如下所示：

class Favorites extends Component {

  constructor(props) {
    super(props);
   }
    render() {

        let cardComps = store.getState().map(data => {
          return (
            <CardComponent data = {data} />
          )
        })

        return (

          <div>

          <div className="array-component">{cardComps}</div>

export default Favorites;

我对 React 和 Redux 还很陌生，所以我不确定我在设置组件时是否做错了什么。当用户从他们的收藏夹中添加或删除它时，我只需要重新渲染该组件。

标签： javascriptreactjsredux

解决方案

Redux对更新状态的引用进行浅比较，并基于此决定是否更新组件。

两者都Array#concat返回具有相同引用元素的新数组。因此，状态比较返回并且没有发生渲染。Array#filter false

假设action.data是一维数组。这应该有效。

switch(action.type) {
    case 'ADD_FAVORITE':
       return [...state,action.data];
    case 'SUB_FAVORITE':
       return [...state.filter(state => state.name !== action.data.name)]
    default:
       return state;
 }

推荐阅读