Redux: ΠžΡ‚Π»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Ρ„Π°ΠΉΠ»Π° ... ΠΊΡƒΠ΄Π° ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ File?

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 18 июл. 2016  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: reduxjs/redux

Π― ΠΈΡ‰Ρƒ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ². Π£ мСня Π΅ΡΡ‚ΡŒ цСлСвая страница, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ», Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΠΌ прСдлагаСтся Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π΄ΠΎ Π½Π°Ρ‡Π°Π»Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ„Π°ΠΉΠ»Π°. МнС Π½ΡƒΠΆΠ½ΠΎ Π³Π΄Π΅-Ρ‚ΠΎ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ пСрСтаскиваСмый Ρ„Π°ΠΉΠ»ΠΎΠ²Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Π½ΠΎ ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ состояниС Redux Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ простыС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ JS, я Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½, ΠΊΡƒΠ΄Π° ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ этот Ρ„Π°ΠΉΠ»ΠΎΠ²Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚. Π― ΠΌΠΎΠ³ Π±Ρ‹ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² ΠΊΠ°ΠΊΠΎΠΌ-Ρ‚ΠΎ состоянии / ΠΎΠΏΠΎΡ€Π΅ React, Π½ΠΎ Π·Π°Ρ‚Π΅ΠΌ я Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ ΠΈ Ρ‚. Π”.

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

@olalonde РСкомСндация ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ состояниС Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ сСриализуСмым, мягкая - ΠΎΠ½Π° ​​нС являСтся ΠΊΠ°ΠΌΠ½Π΅ΠΌ

И Π΄Π°ΠΆΠ΅ Ссли Π²Ρ‹ Π·Π°Ρ‚Π΅ΠΌ сСриализуСтС своС состояниС - дСскриптор File Π±ΡƒΠ΄Π΅Ρ‚ сСриализован Π² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, поэтому Π²Ρ‹ Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ошибки сСриализации.

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Одним ΠΈΠ· Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Π½ΠΈΠ΅ Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π° Π½Π° ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ состояния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ 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))

ΠŸΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΡ здСсь Π½Π° случай, Ссли это ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ