javascript - thunk 和 action 完成后如何使用 redux 的当前状态？

Question

thunk 和 action 完成后如何使用 redux 的当前状态？问题出在 handleSubmit 函数中，如果我注册一个有错误的用户，它会使用消息“电子邮件已注册”来更新 redux 的状态，但是当访问调度承诺中的状态时，会向我发送一个错误的状态，而没有消息。

函数处理提交

const handleSubmit = (e) => {
    e.preventDefault()
    const form = {
        name: e.target[0].value,
        email: e.target[1].value,
        password: e.target[2].value,
        confirmPassword: e.target[3].value
    }

    const { name, email, password } = form

    if (isFormValid(form)) {

        //TODO: FIX IT synchronize redux with errors

        dispatch( startRegisterUser(name, email, password) ).then(() => {
            console.log(state)
        })

    }

}

注册动作和重击

export const startRegisterUser = (name, email, password) => {
    return (dispatch, state) => {
        dispatch(startLoadingAction())

        return firebase.auth().createUserWithEmailAndPassword(email, password)
            .then(async ({ user }) => {
                await user.updateProfile({
                    displayName: name,
                    photoURL: ''
                })
                dispatch(registerUserAction(user.uid, user.displayName))
            })
            .catch(e => {
                if (e.code === "auth/email-already-in-use") {
                    dispatch(errorAction("Email already registered"))
                } else {
                    dispatch(errorAction("Unexpected error"))
                }

            })
            .then(() => {
                dispatch(finishLoadingAction())
                console.log("finished dispatch's", state())
                return
            })
        
    }
}

export const registerUserAction = (uid, displayname) => {
    return {
        type: types.register,
        payload: {
            uid,
            displayname
        }
    }
}

控制台日志我想获取第一个控制台日志的状态，但在 handlesubmit 函数中

标签： javascriptreactjsreduxredux-thunk

Answer 1

您应该errorAction在 reducer 中处理，ui使用错误消息更新存储切片。而且，您需要state()在 thunk 函数中返回承诺中的 。handleSubmit然后，您将在事件处理程序中获得整个状态。

例如

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';

function errorAction(message) {
  return {
    type: 'ERROR',
    payload: message,
    error: true,
  };
}
export const startRegisterUser = (name, email, password) => {
  return (dispatch, state) => {
    return Promise.reject({ code: 'auth/email-already-in-use' })
      .catch((e) => {
        if (e.code === 'auth/email-already-in-use') {
          dispatch(errorAction('Email already registered'));
        } else {
          dispatch(errorAction('Unexpected error'));
        }
      })
      .then(() => state());
  };
};

export const registerUserAction = (uid, displayname) => {
  return {
    type: 'REGISTER',
    payload: {
      uid,
      displayname,
    },
  };
};

function rootReducer(state = { ui: { error: '' } }, action) {
  switch (action.type) {
    case 'ERROR':
      return { ui: { error: action.payload } };
    default:
      return state;
  }
}

const store = createStore(rootReducer, applyMiddleware(thunk));

function handleSubmit() {
  store
    .dispatch(startRegisterUser('name', '[e-mail]', '123') as any)
    .then((state) => {
      console.log('handleSubmit state: ', state);
    });
}

// triggered by user submit event
handleSubmit();

输出：

handleSubmit state:  { ui: { error: 'Email already registered' } }