Правильный способ передачи состояния хранилища Redux дочерним компонентам в ReactJS

Question

== Отредактировали вопрос, потому что, к сожалению, решения не сработали! ==

== Теперь я понял, что это потому, что мой Redux Store не обновляется правильно !! ==

Я пытаюсь построить проект в ReactJS с Redux, в котором есть хранилище Redux с периодическим обновлением состояния из выборки Axios.

Эта выборка Axios обновляет начальное состояние хранилища в порядке.

Я передаю состояние магазина как реквизиты для дочерних элементов родительского элемента.

Когда состояние хранилища меняется, если затрагивается Child, мне нужны реквизиты для передачи и повторного рендеринга Child.

Я думал, что если я отправлю реквизиты (которые установленыby mapStateToProps) для Child, и состояние изменилось, это повторно отправит реквизит и вызовет повторный рендеринг, но это не так.

Любые советы о правильном способе достижения того, что я 'Попытка была бы оценена.

Я консоль зарегистрировал реквизиты из метода componentDidMount родительского элемента, и я вижу обновление реквизита, как я ожидал;каждый раз, когда я вручную изменяю извлекаемый JSON, реквизиты меняются, чтобы отразить это.

Родительский элемент:

class Parent extends React.Component {

    componentDidMount() {
        this.props.updatePanels();
        console.log(this.props);
        this.interval = setInterval(() => {
        this.props.updatePanels();
        }, 5000);
       }

     componentWillUnmount() {
       clearInterval(this.interval)
     }

     renderList() {
        return this.props.panels.map((panel) => {
          return (
              <Child key={panel.id} lat={panel.lat} lng={panel.lng} />
          );
        });
      }

    render() {
        return (
            <div>
                {this.renderList()}
            </div>

        );
    }
}

Дочерний элемент:

const Child = props => (
    <div key={props.id}>
         <div>{props.lat}</div>
         <div>{props.lng}</div>
    </div>
)

Redux Action Creator

import panelFetch from '../dataCalls/panelFetch';

export const updatePanels = () => {

    return async (dispatch) => {
      const response = await panelFetch.get("/panelList.json");

      console.log(response.data);

      dispatch ({
        type: 'UPDATE_PANELS',
        payload: response.data
      });
    };
  };

Панель обновления Redux Редуктор

export default (state = [], action) => {

    switch (action.type) {
      case 'UPDATE_PANELS':
        return action.payload;
      default:
        return state;
    }

  };

ReduxРедукторы

import { combineReducers } from 'redux';
import updatePanelsReducer from './updatePanelsReducer'; //compartmentalise our reducer

const panelReducer = () => {
    return [{
        "id": 400016,
        "lat": 51.509865,
        "lng": -0.118092
    }, {
        "id": 400017,
        "lat": 51.509865,
        "lng": -0.118092
    }, {
        "id": 400018,
        "lat": 51.509865,
        "lng": -0.118092
    }, {
        "id": 400019,
        "lat": 51.509865,
        "lng": -0.118092
    }
];
};

export default combineReducers({
    panels: panelReducer,
    updatePanels: updatePanelsReducer
  });

Answer 1

Дочерний компонент не должен переводить свои реквизиты в его состояние.

Дочерний компонент не обновляется, потому что его метод рендеринга не зависит от его реквизитов, но от m его собственного внутреннего состояния, которое выустановите один раз в своем конструкторе и никогда не меняйте.

Это будет работать, если ваш дочерний компонент выглядит следующим образом:

class Child extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div key={this.props.id}>
                 <div>{this.props.lat}</div>
                <div>{this.props.lng}</div>
            </div>
        )
    }
}

---

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

const Child = props => (
    <div key={props.id}>
         <div>{props.lat}</div>
         <div>{props.lng}</div>
    </div>
)

Answer 2

Проблема в том, что вы устанавливаете состояние компонента Child только один раз в конструкторе.Последующие изменения в реквизите не обновят состояние компонента Child.

Вы можете использовать метод React getDerivedStateFromProps(props, state), чтобы установить начальное состояние, а затем обновить состояние после обновления реквизита.Прочитайте это здесь https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

ИЛИ

Вы можете просто передать реквизиты компоненту Child без необходимости устанавливать состояние.

class Child extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div key={this.props.id}>
                 <div>{this.props.lat}</div>
                <div>{this.props.lng}</div>
            </div>
        )
    }
}

Надеждаэто помогает!