web-dev-qa-db-ja.com

小道具ストアで更新されない小道具に反応する

小道具の設定には常にreact-redux connectを使用してきましたが、ライフサイクルメソッドを使用するには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を設定して、常にストアの値を反映するにはどうすればよいですか？

reactjsreact-nativereduxreact-redux
8
BeniaminoBaggins

それはこのようなものでなければなりません。確認コンポーネントで：

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

export default connect(mapStateToProps)(Confirmation);

レデューサーインデックスファイルでは、次のようになります。

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

ここには、ConfirmationReducerという独自のリデューサーファイルがあると思います。それはこのようなものでなければなりません。

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;
}

上記のタイプと関連するブール型のペイロードを使用してアクションを作成する独自のアクションクリエーターを必ず作成してください。

最後に、次のように、確認コンポーネント内のストアからプロパティにアクセスできます。

{this.props.modalActive}

コード全体を投稿していないため、正確なシナリオのソリューションを提供することは非常に困難です。お役に立てれば。幸せなコーディング！

9
Ravindra Ranwala

私にとっての問題は、this.props.myObjectをディープクローンされていない変数に割り当てていたため、次のようにして修正しました

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

私がやっていたこと

let prev = this.props.searchData

それで、ページ全体を乱していました。

4
Black Mamba

これはあなたを助けるかもしれません

componentWillReceiveProps(nextProps) {

 console.log();
 this.setState({searchData : nextProps.searchData})
}
1
D V Yogesh