react props 不使用 redux store 更新

Question

我一直使用 react-redux connect 来配置 props，但我需要使用 react Component 来使用生命周期方法。我注意到我从商店获取的道具似乎是静态的，并且它们不会随着商店的更新而更新。

代码：

class AlertModal extends Component {

  title
  isOpen
  message

  componentDidMount() {
    const { store } = this.context
    const state = store.getState()
    console.log('state', state)
    console.log('store', store)
    this.unsubscribe = store.subscribe(() => this.forceUpdate())
    this.title = state.get('alertModal').get('alertModalTitle')
    this.isOpen = state.get('alertModal').get('isAlertModalOpen')
    this.message = state.get('alertModal').get('alertModalMessage')
    this.forceUpdate()
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  updateAlertModalMessage(message) {
    this.context.store.dispatch(updateAlertModalMessage(message))
  }
  updateAlertModalTitle(title) {
    this.context.store.dispatch(updateAlertModalTitle(title))
  }

  updateAlertModalIsOpen(isOpen) {
    this.context.store.dispatch(updateAlertModalIsOpen(isOpen))
  }

  render() {

    console.log('AlertModal rendered')
    console.log('AlertModal open', this.isOpen) <======= stays true when in store it is false

    return (
      <View

如何设置 title、isOpen 和 message 以便它们始终反映商店价值？

Answer 1

这可能对你有帮助

componentWillReceiveProps(nextProps) {

 console.log();
 this.setState({searchData : nextProps.searchData})
}

Answer 2

对我来说，问题是我将 this.props.myObject 分配给了一个没有深度克隆的变量，所以我使用

修复了它

let prev = Object.assign({}, this.props.searchData)

我在做什么

let prev = this.props.searchData

所以我打扰了整个页面。对我来说似乎很安静。

Answer 3

应该是这样的。在您的确认组件中：

const mapStateToProps = (state) => {
  return { modalActive: state.confirmation.modalActive };
}

export default connect(mapStateToProps)(Confirmation);

在你的 reducer 索引文件中，应该是这样的：

const rootReducer = combineReducers({
  confirmation: ConfirmationReducer
});

我相信您在这里有自己的名为 ConfirmationReducer 的 reducer 文件。应该是这样的。

import { ON_CONFIRM } from '../actions';

const INITIAL_STATE = {modalActive: true};
export default function(state = INITIAL_STATE, action) {
  console.log(action);
  switch (action.type) {
    case ON_CONFIRM:
      return { ...state, modalActive: action.payload };
  }

  return state;
}

确保您编写自己的动作创建器来创建具有上述类型和布尔类型相关负载的动作。

最后，您应该能够像这样从您的 Confirmation 组件内的商店访问该属性：

{this.props.modalActive}

您还没有发布完整的代码，因此很难为确切的场景提供解决方案。希望这可以帮助。编码愉快！