Установка глубоко вложенного объекта в редуктор Redux, не распространяющего обновления на мой компонент

Question

Я пытаюсь установить глубоко вложенный объект в моем приложении activ.js / redux через редуктор, но изменения объекта не распространяются на мой компонент.Как я должен обновить и mapStateToProps объект, подобный этому?

Я попытался ... загрузить полезную нагрузку моего действия в моем редукторе, отобразить объект более высокого уровня в моем mapStateToProps и сгладить объект, который я сопоставляю, с реквизитами моих компонентов.

Мое начальное состояние:

const initialState = {
    myObject : {
        prop1 : {
            prop2 : {
                array1 : [],
                array2: [],
                array3: []
            }
        }
    }
}

Мой редуктор:

const app = (state = initialState, action) => {
  switch(action.type) {
    case SET_DATA:
      return {
        ...state,
        myObject: action.payload
      };
  } default:
      return state;
}

export default app;

Мой компонент:

class Component extends React.PureComponent() {
    render() {
        return (
            {
                JSON.stringify(this.props.componentObject)
            }
        );
    }
}

function mapStateToProps(state) {
    return {
        componentObject: state.myObject
    };
}

export default connect(mapStateToProps)(Component);

Создатель действий для обновления вложенного объекта

export function setData(newDeeplyNestedObject) {
  return {
    type: SET_DATA,
    payload: newDeeplyNestedObject
  };
}

В результате мой компонент не отображает состояние Redux.Похоже, что Redux не обнаруживает изменения в моих реквизитах компонентов, поэтому не обновляет Компонент.Может кто-нибудь сказать мне, как убедиться, что Redux отправляет обновления моему компоненту при изменении глубоко вложенной объектной структуры?

Я знаю, что Redux поверхностно сравнивает обновления, но я чувствую себя как JSON.parse (JSON.stringify ()) в моем редукторе не в этом направлении.

Answer 1

1) Реализовать магазин:1007 *

   import {bindActionCreators} from "redux";
   const mapDispatchToProps = dispatch =>(bindActionCreators({setData}, dispatch));
   //Now we can use the setData action creator as this.props.setData()

4) Используйте оба mapStateToProps и mapDispatchToProps и подключите его к компоненту:

export default connect(mapStateToProps,mapDispatchToProps)(Component);

5) Предположим, вы определили myObjects в INITIAL_STATE, например:

    myObject : {
        prop1 : {
            prop2 : {
                array1 : [{a:'1'},{b:'2'}],
                array2: [{q:'6'},{w:'4'}],
                array3: [{m:'9'},{n:'0'}]
            }
        }
    }
};

6) Теперь вам нужно запустить ваше действие функция setData, используя любые changeHandlers или нажатие кнопки, и передать новый объект, который вы хотите добавить в качестве аргумента.Идея состоит в том, чтобы распределить объекты (используя оператор ... ) и добавить новые элементы, которые вы хотите добавить.Предположим, вы хотите запустить свое действие в событии onClick и изменить значения array1:

<input type="button" onClick={()=>this.props.setData({...this.props.myObject.prop1.prop2,array1:[{changedA:'21'},{changedB:'32'}]})}/>

Это запустит действие, и только массив1 будет изменен.Точно так же вы можете сделать для любых вложенных объектов. Независимо от того, что вы хотите изменить, вы должны расстелить свои объекты, а затем добавить новые элементы

PS: также заключите возврат в теги.