Где в избыточном, чтобы вызвать функцию, которая записывает данные из полезной нагрузки?

Question

Где в redux вызывать функцию, которая записывает данные для нового пользователя?

Есть функция addDataUser (), которая записывает данные в базу данных, в какое место она вызывается для передачи данных из полезной нагрузки. к нему?

Службы. js // Добавить данные пользователя

  addDataUsers = user => {
    firebase.firestore()
     .collection("users")
     .add({
       user: user
     });
  };

authActions. js // Действия

const userSignup = user => {
    return {
        type: "FETCH_USER_SIGNUP",
        payload: user
    };
};

authReducer. js // Reducer

const initialState = {
    userToken: []
};

const authReducer = (state = initialState, action) => {
  switch(action.type) {
    case "FETCH_USER_SIGNUP":
        return {
            ...state,
            userToken: {
            ...state.userToken,
            user: action.payload.login,
            userToken: Math.random() + action.payload.login
           }
         };
    default: return state;
   };
 };

Пользователь нажимает «Регистрация», и все данные из формы отправляются в authActions, но как и где вызвать функцию addDatauser (PAYLOAD), чтобы передать ей action.payload?

Answer 1

вам следует использовать asyn c промежуточное ПО для действий, например:

redux-thunk

redux-saga

например, мы используем redux-thunk:

import axios from 'axios';

export const addDataUser = user => ({
  type: "FETCH_USER_SIGNUP",
  payload: user
});

export const addDataUserAsync = () => dispatch => {
  axios.post(url)
  .then(response => dispatch(addDataUser(response)))
  .catch(err => console.log(err));
}

, затем доступ к полезной нагрузке в редукторе.

Возможно, это поможет вам, и для получения дополнительной информации я ответил на этот вопрос полностью:

Реакция Redux на выборку данных из бэкэнд-подхода

Answer 2

После вызова addDataUsers вы можете «отправить» данные, используя ваше действие userSignup.

Если вы используете redux hooks , это будет что-то вроде:

import React, { useCallback } from 'react'
import { useDispatch } from 'react-redux'
// import your functions

export const YourComponent = () => {
  const dispatch = useDispatch()
  const onRegistrationClick = useCallback(async () => {
    // This function is called when registration button is pressed
    const data = /* your data logic */
    const docRef = await addDataUsers(data)
    const userDoc = await db.collection('users').doc(docRef.id).get()
    const user = userDoc.data()
    // --> HERE you "save" the data to your store <--
    dispatch(userSignUp(user))
  }, [dispatch])
  // ...
}

Другая альтернатива - использовать redux-thunk и добавить все логи c в одном действии:

function addUserAndStore(data) {
  return async (dispatch) => {
    const docRef = await addDataUsers(data)
    const userDoc = await db.collection('users').doc(docRef.id).get()
    const user = userDoc.data()
    // --> HERE you "save" the data to your store <--
    dispatch(userSignUp(user))
  }
}

Тогда в вашем коде компонента у вас есть только чтобы назвать это:

dispatch(addUserAndStore(data))