Попытка выполнить рендеринг после обновления магазина через Redux

Question

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

Работает нормально, но как только я обновляю хранилище через диспетчеризацию, Компонент не перерисовывает, если я использую this.forceUpadate, он работает, но я не хочу его использовать. Есть ли какое-то решение для этого.

Код

class MenuContents extends Component {
  constructor() {
    super();  
    this.state = {
      menu : []
    }    
  }
  componentDidMount() {
    // populate the left menu
    fetch("./services/left-menu.json")
    .then(res => res.json())
    .then(data => {
      store.dispatch( addLeftMenu(data))
      this.forceUpdate(); // I dont want to use this
    }).catch(function() {
      console.log("An error occured during fetch operation.");
    });
  }
  render() {
    let storeValue = store.getState();
    const leftMenu = storeValue.leftMenu[0];

    const isMenuLoaded = leftMenu !== undefined && leftMenu !== "";
    let menuContents;
    let menu;

    if(isMenuLoaded) {
        menuContents = leftMenu.map((menuItem, index)=> {

        menu = <li role="presentation" key={index}>
                  <a className="accordion-toggle" data-toggle="accordion" href="#">
                  {menuItem.name}
                  </a>

              </li>;
        return menu;
      }
      );
      menuContents = <ul className="nav nav-pills nav-stacked"> {menuContents} </ul>;
    }
    else {
      menuContents = <Spinner />
    }
    return (<div>{menuContents}</div>);
  }
}

export default MenuContents;

См. Код редуктора ниже.

Редуктор / index.js

import { ADD_LEFT_MENU } from "../constants/action-types";

const initialState = {
  leftMenu: []
};
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_LEFT_MENU:
    return { ...state, leftMenu: [...state.leftMenu, action.payload]};
    default:
      return state;
  }
};
export default rootReducer;

Answer 1

Я думаю, исходя из того, что сказал Сакхи Мансур, вы хотите подключить свой компонент к хранилищу резервов. Вот статья, которая, я думаю, объясняет это довольно хорошо:

https://medium.com/mofed/reduxs-mysterious-connect-function-526efe1122e4

В основном реагирующие компоненты повторно визуализируются при изменении их состояния или реквизита. Прямо сейчас у вас есть компонент, и у вас есть магазин. Что должно произойти, так это то, что вы вызовете какое-то действие, которое вернет что-то, что будет использовано редуктором. Редуктор обновит запас редукции. Затем, в идеале, магазин обновит реквизиты компонента, которые затем вызовут повторную визуализацию.

Я думаю, что тебе не хватает последней части. Когда вы вызываете connect, как в статье, он подключит хранилище к компоненту. Таким образом, всякий раз, когда определенные части магазина изменяются, он обновляет связанные реквизиты в компоненте.

Answer 2

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

class MenuContents extends Component {
  constructor() {
    super();  
    this.state = {
      menu : []
    }    
  }
  componentDidMount() {
    // populate the left menu
    fetch("./services/left-menu.json")
    .then(res => res.json())
    .then(data => {
      store.dispatch( addLeftMenu(data))
    }).catch(function() {
      console.log("An error occured during fetch operation.");
    });
  }
  render() {
    let storeValue = store.getState();
    const leftMenu = storeValue.leftMenu[0];

    const isMenuLoaded = leftMenu !== undefined && leftMenu !== "";
    let menuContents;
    let menu;

    if(isMenuLoaded) {
        menuContents = leftMenu.map((menuItem, index)=> {

        menu = <li role="presentation" key={index}>
                  <a className="accordion-toggle" data-toggle="accordion" href="#">
                  {menuItem.name}
                  </a>

              </li>;
        return menu;
      }
      );
      menuContents = <ul className="nav nav-pills nav-stacked"> {menuContents} </ul>;
    }
    else {
      menuContents = <Spinner />
    }
    return (<div>{menuContents}</div>);
  }
}

const mapStateToProps = state => ({
   leftMenu: state.leftMenu,
});

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


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

Answer 3

Если ваш вызов извлечения не приводит к изменению реквизита или состояния компонента, React не может знать, что ваш компонент нуждается в повторной визуализации. Вы должны подключить ваш компонент с помощью response-redux. Прямой доступ к хранилищу резервных копий в компоненте, как это обычно делается, не рекомендуется. Большая часть экосистемы построена вокруг связанных компонентов.