Π― ΠΈΡΡ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΠ»ΠΎΠ². Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΡΠ΅Π»Π΅Π²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ°, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°ΡΡ ΡΠ°ΠΉΠ», Π° Π·Π°ΡΠ΅ΠΌ ΠΈΠΌ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΡΡΡ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π΄ΠΎ Π½Π°ΡΠ°Π»Π° Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΠ»Π°. ΠΠ½Π΅ Π½ΡΠΆΠ½ΠΎ Π³Π΄Π΅-ΡΠΎ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠ°ΠΉΠ»ΠΎΠ²ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ, Π½ΠΎ ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Redux Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ JS, Ρ Π½Π΅ ΡΠ²Π΅ΡΠ΅Π½, ΠΊΡΠ΄Π° ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΡΡΠΎΡ ΡΠ°ΠΉΠ»ΠΎΠ²ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ. Π― ΠΌΠΎΠ³ Π±Ρ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ΠΊΠ°ΠΊΠΎΠΌ-ΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ / ΠΎΠΏΠΎΡΠ΅ React, Π½ΠΎ Π·Π°ΡΠ΅ΠΌ Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΠΎΠ½ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΏΠ΅ΡΠ΅Π΄Π°Π½ Π½ΡΠΆΠ½ΠΎΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΈ Ρ. Π.
ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ
ΡΠ΅ΡΠ΅Π½ΠΈΠΉ Π±ΡΠ»ΠΎ Π±Ρ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°Π½ΠΈΠ΅ Ρ
ΡΠ°Π½ΠΈΠ»ΠΈΡΠ° Π½Π° ΠΏΡΠ΅Π΄ΠΌΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ store.subscribe, Ρ
ΠΎΡΡ Ρ Π½Π΅ ΡΠ²Π΅ΡΠ΅Π½, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ store.subscribe Ρ ΠΏΠΎΠΌΠΎΡΡΡ connect(...)
. ΠΠΎΠΆΠ΅Ρ, this.context.store.subscribe()
?
@olalonde Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΡΠ΅ΠΌΡΠΌ, ΠΌΡΠ³ΠΊΠ°Ρ - ΠΎΠ½Π° ββΠ½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΌΠ½Π΅ΠΌ
Π Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°ΡΠ΅ΠΌ ΡΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ - Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡ File
Π±ΡΠ΄Π΅Ρ ΡΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½ Π² ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΡΠ΅ΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ. Π― Π·Π°ΠΊΠΎΠ½ΡΠΈΠ» ΡΠ΅ΠΌ, ΡΡΠΎ ΠΎΠ±Π΅ΡΠ½ΡΠ» ΡΠ²ΠΎΠΉ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ:
waitIntroMessageShowedActionCreator.js
// delays execution of `fn` until `state.session.user.ui.introMessageShowed === true`
export const initWaitIntroMessageShowed = ({ getState, subscribe }) => (fn) => () => (
new Promise((resolve, reject) => {
const handleChange = () => {
const state = getState()
if (!state.session.user.ui) return null
if (!state.session.user.ui.introMessageShowed) return null
/* eslint-disable no-use-before-define */
unsubscribe()
return Promise
.resolve()
.then(() => fn())
.catch(reject)
.then(resolve)
}
const unsubscribe = subscribe(handleChange)
handleChange()
})
)
ΠΈ Π² ΠΌΠΎΠ΅ΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅:
class DragDropSignup extends Component {
constructor(props) {
super(props)
const waitIntroMessageShowed = initWaitIntroMessageShowed(this.props.store)
this.onSignupSuccess = waitIntroMessageShowed(this.onSignupSuccess.bind(this))
}
// ...
}
// ...
// pass store object as prop
const connectStore = () => (WrappedComponent) => {
const ConnectStore = (props, context) => (
<WrappedComponent store={context.store} {...props} />
)
ConnectStore.contextTypes = { store: React.PropTypes.object }
return ConnectStore
}
export default connectStore()(connect()(DragDropSignup))
ΠΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ Π·Π΄Π΅ΡΡ Π½Π° ΡΠ»ΡΡΠ°ΠΉ, Π΅ΡΠ»ΠΈ ΡΡΠΎ ΠΊΠΎΠΌΡ-ΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
@olalonde Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΡΠ΅ΠΌΡΠΌ, ΠΌΡΠ³ΠΊΠ°Ρ - ΠΎΠ½Π° ββΠ½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΌΠ½Π΅ΠΌ
Π Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π²Ρ Π·Π°ΡΠ΅ΠΌ ΡΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ - Π΄Π΅ΡΠΊΡΠΈΠΏΡΠΎΡ
File
Π±ΡΠ΄Π΅Ρ ΡΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½ Π² ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΡΠ΅ΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ.