View не рендерится, но мой Redux Store обновляется правильно

Question

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

Вот пример одного из моих компонентов React:

import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import store from "../store/store"
import {updateView} from "../store/actions/index"

function Device(props) {
        props.updateView(props.type, props.objects);
        var state = store.getState().objectView
        store.subscribe(()=>{
            state = store.getState().objectView;
        })
        console.log(state);
        var objcomponent = [];
        state.objects.forEach((obj)=>{
            objcomponent.push(<ObjectComponent info={obj.info} actions={obj.actions}/>)
        });

        return(
            <div className="device-container">
                <div contentEditable className="device-name">Device: {state.type}</div>
                {objcomponent}
           </div>
            )
    }



const mapDispatchToProps = dispatch =>{
    return bindActionCreators({
        updateView: updateView
    }, dispatch);
}

export default connect(null, mapDispatchToProps)(Device)

В этом случае компонент должен выполнять рендеринг с отображением новых устройств.Но вместо этого новые устройства будут отображаться только в том случае, если размер массива будет больше, чем при последнем рендере.И это частичный повтор при этом.Было бы что-то вроде этого

//Previous Component
var component = [1, 2]

//Expected new Component
var component = [3, 4, 5]

//Actual new Component
var component = [1, 2, 5]

Тем временем в магазине Redux я мог видеть все изменения, которые должны были произойти.

Если вы думаете, что это поможет, вот мои редукторыи действия тоже.Я не думаю, что в любом случае изменяю исходное состояние, но если у вас есть больше опыта в Redux, пожалуйста, укажите на это.Я всего лишь новичок.

Действие:

import {UPDATE_VIEW} from "./objectviewactions"

export const updateView = (type,objects)=>{
    return {
        type: UPDATE_VIEW,
        payload: {type: type, objects: [...objects]}
    }
}

Редуктор:

import {UPDATE_VIEW} from "../actions/objectviewactions";
var initialState = {
    type: "",
    objects: []
}
export const reducer = (state = initialState, action)=>{
    switch(action.type){
        case UPDATE_VIEW:
            return {
                ...state,
                ...action.payload
            }
        default: 
            return state
        }
}

Answer 1

Пожалуйста, НЕ обращайтесь к хранилищу Redux прямо внутри такого компонента React!Это то, что connect() должен обрабатывать для вас.

Вы должны предоставить функцию mapStateToProps в качестве первого аргумента для извлечения любых данных, которые нужны вашему компоненту, и эти данные будут передаваться в ваш компонент в качестве подпорки..

Answer 2

Похоже, ваши ObjectComponent экземпляры нуждаются в ключах .Когда родительский компонент, например, ваш device-container div имеет массив произвольного числа дочерних компонентов, ключи позволяют React четко определять, что можно использовать повторно, а что необходимо заменить при рендеринге.

Итак,вы бы вызвали ObjectComponent так:

<ObjectComponent key={obj.someUniqueIdentifier} info={obj.info} actions={obj.actions}/>