Как мне переписать это с «перекомпоновать»? - PullRequest
Новая
       28

Как мне переписать это с «перекомпоновать»?

0 голосов
/ 03 сентября 2018

У меня есть этот компонент класса, и я хочу переписать его в функциональный компонент без сохранения состояния с помощью recompose: 

export default class Popular extends Component {
    state = {
        value: 0,
        selected: "All",
        repos: null
    }

componentDidMount() {
    this.handleSelected(this.state.selected)
}

handleChange = (e, value) => {
    this.setState({ value })
}

handleSelected = lang => {
    this.setState({
        selected: lang,
        repos: null
    })
    fetchPopularRepos(lang).then(repos => {
        this.setState({
            selected: lang,
            repos
        })
    })
}

Я пытаюсь объединить onSelectLanguage и onFetchRepos в одной функции, как в моем коде, перед рефакторингом. Я не знаю, как переписать это для моей функции componentDidMount.

UPDATE:

получил эту работу с: 

const enhance = compose(
  withStateHandlers(initialState, {
    onChangeLanguage,
    onSelectLanguage
  }),
  lifecycle({
    componentDidMount() {
      fetchPopularRepos(this.props.selected).then(repos => {
        this.setState({
          repos
        })
      })
    }
  }),
  lifecycle({
    componentDidUpdate(prevProps) {
      if (this.props.selected !== prevProps.selected) {
        this.setState({ repos: null })
        fetchPopularRepos(this.props.selected).then(repos => {
          this.setState({
            repos
          })
        })
      }
    }
  })
)

Эти жизненные циклы выглядят не очень сексуально. Не уверен, стоит ли это рефакторинга.

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

Продолжая предыдущий ответ, вы можете использовать функциональную композицию для объединения onFetchRepos и onSelectLanguage, как требуется. Если я правильно понимаю ваши требования, вы сможете достичь этого с помощью следующего: 

const initialState = {
    value: 0,
    selected: "All",
    repos: null
}

const onChangeLanguage = props => (event, value) => ({
    value
})

const onSelectLanguage = props => lang => ({
    selected: lang
})

const onFetchRepos = props => (fetchPopularRepos(props.selected).then(repos => ({
    repos
})))

// Combined function: onFetchRepos followed by call to onSelectLanguage
const onFetchReposWithSelectLanguage = props => onFetchRepos(props)
      .then(response => props.onSelectLanguage(response))

// Minimal code to compose a functional component with both state handers and 
// lifecycle handlers
const enhance = compose(
    withStateHandlers(initialState, {
        onChangeLanguage,
        onSelectLanguage
    }),
    lifecycle({
        componentDidMount() {
            // Fetch repos and select lang on mount
            onFetchReposWithSelectLanguage(this.props)
        }
    })
)

Обновление 

// Minimal code to compose a functional component with both state handers and 
// lifecycle handlers
const enhance = compose(
    withStateHandlers(initialState, {
        onChangeLanguage,
        onSelectLanguage,
        setRepos
    }),
    lifecycle({
        componentDidMount() {
            // Reuse onSelectLanguage logic and call setState manually, use setState callback that
            // fires after state is updated to trigger fetch based on newState.selected language
            this.setState(onSelectLanguage(this.props.selected)(this.props), newState => {
                fetchPopularRepos(newState.selected).then(repos => {
                    this.setState({
                        repos
                    })
                })
            })
        }
    })
)

Надеюсь, это поможет вам!

0 голосов
/ 03 сентября 2018

Это похоже на случай, когда вы хотите использовать lifecycle() метод . Я не recompose эксперт, однако я думаю, что следующие корректировки могут достичь того, что вы ищете: 

const onFetchPopularRepos = props => () => {
    // Make sure the method returns the promise
    return fetchPopularRepos(props.selected).then(repos => ({  
        repos: repos
    }))
}

const withPopularReposState = withStateHandlers(initialState, {
    onChangeLanguage,
    onSelectLanguage
})

// Add a life cycle hook to fetch data on mount
const withLifecycle = lifecycle({
  componentDidMount() {

    // Update the state
    onFetchPopularRepos(this.props).then(newState => this.setState(newState)) 
  }
})();

// Compose the functional component with both lifecycle HOC
const enhance = withLifecycle(withPopularReposState)
...