Question

我正在使用React和Redux编写一个独立的模态。如果模态是可见的，并且传递了初始位置以及Redux存储区中的其余状态，则我将从环境变量传递过来。

我尝试使用反应生命周期方法来强制更新我的应用，但似乎无济于事。

这是我将App与商店连接的方式

render（）{ const { 媒体，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)

Redux状态如何更改但组件没有变化

2 个答案: