Redux: ν•˜λ‚˜μ˜ μ•‘μ…˜ μƒμ„±κΈ°μ—μ„œ μ—¬λŸ¬ μ•‘μ…˜μ„ λ°œμ†‘ν•˜λŠ” 방법

에 λ§Œλ“  2015λ…„ 06μ›” 01일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: reduxjs/redux

Fluce에 λŒ€ν•œ λͺ‡ 가지 μ˜ˆκ°€ μžˆμŠ΅λ‹ˆλ‹€.

function authFormSubmit(fluce) {
  const {valid, disabled, data: {username, password}} = fluce.stores.authForm

  if (disabled) return

  if (!valid) {
    fluce.dispatch(AUTH_FORM_ERROR, new Error('Form is invalid'))
    return
  }

  fluce.dispatch(AUTH_FORM_DISABLED, true)
  fluce.dispatch(AUTH_FORM_ERROR, null)

  authorize({username, password})
    .then(
      user => fluce.dispatch(CURRENT_USER, user),
      error => fluce.dispatch(AUTH_FORM_ERROR, error)
    )
    .then(
      () => fluce.dispatch(AUTH_FORM_DISABLED, false)
    );
}

reduxμ—μ„œ λ™μΌν•œ μ•‘μ…˜ 생성기λ₯Ό κ΅¬ν˜„ν•˜λŠ” 방법은 λ¬΄μ—‡μž…λ‹ˆκΉŒ? λͺ¨λ“  μž‘μ—… μœ ν˜•μ— λŒ€ν•΄ μž‘μ—… μž‘μ„±μžλ₯Ό λ§Œλ“€μ–΄μ•Ό ν•©λ‹ˆκΉŒ?

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

μ•„λ§ˆλ„ μ•‘μ…˜ μƒμ„±μžκ°€ ν•¨μˆ˜λ₯Ό λ°˜ν™˜ν•˜λ„λ‘ ν•  κ²ƒμž…λ‹ˆλ‹€. ν•¨μˆ˜μΈ 경우 dispatch 및 μƒνƒœκ°€ μ œκ³΅λ©λ‹ˆλ‹€.

λͺ¨λ“  3 λŒ“κΈ€

μ•„λ§ˆλ„ μ•‘μ…˜ μƒμ„±μžκ°€ ν•¨μˆ˜λ₯Ό λ°˜ν™˜ν•˜λ„λ‘ ν•  κ²ƒμž…λ‹ˆλ‹€. ν•¨μˆ˜μΈ 경우 dispatch 및 μƒνƒœκ°€ μ œκ³΅λ©λ‹ˆλ‹€.

μœ„μ—μ„œ μ„€λͺ…ν•œ λŒ€λ‘œ 비동기 AC에 λŒ€ν•œ 지원을 μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€. ν˜„μž¬λ‘œμ„œλŠ” μƒνƒœμ— μ•‘μ„ΈμŠ€ν•  수 μ—†μŠ΅λ‹ˆλ‹€. μ–Έμ  κ°€λŠ” 이 μƒνƒœλ‘œ λŒμ•„κ°€κ² μ§€λ§Œ APIλ₯Ό μ„œλ‘λ₯΄κ³  μ‹Άμ§€λŠ” μ•ŠμŠ΅λ‹ˆλ‹€.

μ—…λ°μ΄νŠΈ: μ§€κΈˆ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

// Could also look into state in the callback form
export function incrementIfOdd() {
  return (dispatch, state) => {
    if (state.counterStore.counter % 2 === 0) {
      return;
    }

    dispatch(increment());
  };
}
이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰