Как изменяется состояние редукции, но компонент не меняется

Question

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

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

Вот как я подключаю свое приложение к магазину:

render () { const { media, initPosition, isMobile, title, isVisible, onClose } = this.props;

const photos = media.filter(
  item => typeof item.video === 'undefined'
);
const videos = media.filter(
  item => typeof item.video !== 'undefined'
);
const initState = {
  media: {
    items: media,
    filteredItems: {
      all: media,
      photos,
      videos
    },
    filter: 'all',
    initPosition,
    currentPosition: initPosition
  },
  gallery: {
    isMobile,
    title
  }
};

const store = createStore(
  reducer,
  initState,
  composeEnhancers(applyMiddleware(...middleware))
);

return (
  <Provider store={store}>
    <App onClose={e => onClose(e)} isVisible={isVisible} />
  </Provider>
);

Я называю мой модал так:

<Gallery
      media={videos.concat(photos)}
      isMobile={isMobile}
      isVisible={show}
      onClose={() => this.setState({ show: false })}
      initPosition={position}
      changePosition={position => this.setState({ position })}
      title="Maximus"/>

И вот как я подключаю его к состоянию:

function mapStateToProps(state) {
  const { media, gallery } = state;
  const {
    filteredItems, filter, currentPosition, initPosition
  } = media;
  const { isMobile, title } = gallery;
  return {
    filteredMedia: filteredItems,
    filter,
    currentPosition,
    initPosition,
    isMobile,
    title
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    changeMediaProp
  }, dispatch);
}

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

После того, как isVisible изменен, кажется, что ничего не работает с избыточным хранилищем. Он меняется, но приложение не обновляется.

Когда я переключаю модальный режим (change isVisible prop), состояние приращения постоянно меняется, но мое приложение не перерисовывается.

Итак, подведем итог. Я изменяю isVisible и initPosition из окруженного приложения (эти реквизиты не сохраняются в хранилище), и когда я их меняю, мой компонент не может реагировать на изменения из хранилища редуктора.

Answer 1

Я передавал несколько магазинов своему приложению.Я исправил это, сохранив хранилище в конструкторе и не создавая его несколько раз.

 let newStore = store;
    if (!newStore) {
      newStore = createStore(
        reducer,
        initState,
        composeEnhancers(applyMiddleware(...middleware))
      );
      this.setState({ store: newStore });
    }


    return (
      <Provider store={newStore}>
        <App onClose={e => onClose(e)} isVisible={isVisible} />
      </Provider>
    );

У кого-нибудь есть лучшее решение?

Answer 2

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

https://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/

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

import { connect } from 'react-redux'

const TodoItem = ({ todo, destroyTodo }) => {
  return (
    <div>
      {todo.text}
      <span onClick={destroyTodo}> x </span>
    </div>
  )
}

const mapStateToProps = state => {
  return {
    todo: state.todos[0]
  }
}

const mapDispatchToProps = dispatch => {
  return {
    destroyTodo: () =>
      dispatch({
        type: 'DESTROY_TODO'
      })
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(TodoItem)