redux 状态如何改变但组件没有

Question

我正在使用 React 和 Redux 编写一个独立的模式。如果 modal 可见并且初始位置和 redux 存储中的其余状态，我会从我的环境变量中传递。

我尝试使用 react 生命周期方法强制更新我的应用，但似乎没有任何效果。

这就是我将我的应用程序与商店连接起来的方式：

渲染（）{ 常量 { 媒体, initPosition, isMobile, 标题, 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 后，redux 商店似乎没有任何效果。它正在改变，但应用程序没有更新。

当我切换模式（更改 isVisible 属性）时，redux 状态不断变化，但我的应用程序没有重新渲染。

所以总结一下。我从被包围的应用程序中更改 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

您的代码没有足够的信息需要知道。你在使用 connect 和 react-redux。如果您需要帮助，这里有一个很好的介绍。

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)