小道具の設定には常に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
を設定して、常にストアの値を反映するにはどうすればよいですか?
それはこのようなものでなければなりません。確認コンポーネントで:
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}
コード全体を投稿していないため、正確なシナリオのソリューションを提供することは非常に困難です。お役に立てれば。幸せなコーディング!
私にとっての問題は、this.props.myObjectをディープクローンされていない変数に割り当てていたため、次のようにして修正しました
let prev = Object.assign({}, this.props.searchData)
私がやっていたこと
let prev = this.props.searchData
それで、ページ全体を乱していました。
これはあなたを助けるかもしれません
componentWillReceiveProps(nextProps) {
console.log();
this.setState({searchData : nextProps.searchData})
}