Как отправить объект из формы в функцию redux saga - PullRequest
Новая
       4

Как отправить объект из формы в функцию redux saga

0 голосов
/ 09 июля 2020

Я использую React redux в приложении.

Я пытаюсь отправить объект из реактивного компонента на запрос redux.

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

См. проверенный код 

-- RegisterRequest.js

import {
    REGISTER_REQUESTING
    } from '../../constants/register'
    
const registerRequest = function registerRequest (data) {
          return {
            type: REGISTER_REQUESTING,
            data
          }
        }   
    
        export default registerRequest

См. форму отправки вызова 

const dispatch = useDispatch(); 
  const onSubmit = (data, e) => {
    e.preventDefault();     
    dispatch(registerRequest(data));
  };

См. полный файл компонента 

---- RegisterComponent.js ---------------------
 
import React from 'react';
import history from './history';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import { useForm } from "react-hook-form";
import { connect,useDispatch } from 'react-redux';
import registerRequest from './actions/registerrequest';

export default function RegisterComponent() {
  const classes = useStyles();
  const { register, handleSubmit,reset, errors} = useForm();

  const dispatch = useDispatch(); 
  const onSubmit = (data, e) => {
    e.preventDefault();     
    dispatch(registerRequest(data));
  };

  return (
      <div className={classes.paper}>
        <form className={classes.form} noValidate onSubmit={handleSubmit(onSubmit)}>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <TextField
                autoComplete="fname"
                name="firstName"
                required
                inputRef={register}
                id="firstName"
                label="First Name"
                autoFocus
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                required
                inputRef={register}
                id="lastName"
                label="Last Name"
                name="lastName"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                inputRef={register}
                id="emailAddress"
                label="Email Address"
                name="emailAddress"
              />
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth            
            color="primary"
            className={classes.submit}
          >
            Sign Up
          </Button>
        </form>
      </div>        
  );
}    

const mapStateToProps = state => ({
  registerU: state.registerU,  
})

const mapDispatchToProps = (dispatch) => {
  return {
    registerU: (data) => {
      dispatch(registerRequest(data))
    }
  }
}

connect(mapStateToProps,mapDispatchToProps)(RegisterComponent);

Я хочу знать, правильно ли я делаю? Что мне нужно отправить полный объект из формы submit, чтобы получить данные со стороны сервера для сохранения регистрационных данных.

Я не знаю, лучшая или последняя практика или нет, но я использую redux sage.

Мое действие registerRequest получает данные формы и отображается, пока я отлаживаю приложение, но затем я получаю сообщение об ошибке. Я не знаю, почему мой запрос не принимает параметр объекта, и я не знаю, как его получает сага redux.

Я показываю код моего файла саги ниже: 

----RegisterSaga.js----

import { take, fork, cancel, call, put, cancelled } from 'redux-saga/effects';
import history from './history';
import Api from './api';
import { handleApiErrors } from './api-errors';
import {
  REGISTER_REQUESTING,
  REGISTER_SUCCESS,
  REGISTER_ERROR,
} from './constants/register'    

import {
  setClient,
  unsetClient,
} from './actions/customerinfo'

import {
  CLIENT_UNSET,
} from './customerInfo'    

async function registerU(data){      
  try {      
    const { user } = data;
    let res = await Api.post('/Create/Register', {user});
    let response = await res.json();
    return response;
  }
 catch (e) {
        return e;
  } 
}

function* registerFlow (user) {  
  let token;
    try {      
    token = yield call(registerU,user)           

    localStorage.setItem('token', JSON.stringify(token))

  } catch (error) {
    yield put({ type: REGISTERUSER_ERROR, error })
  } finally {
  }   
  return token
}

// Our watcher (saga)
function* registerWatcher () {
  while (true) {
    const { user } = yield take(REGISTER_REQUESTING);

    const task = yield fork(registerFlow, user);        
  }
}

export default registerWatcher

--- Index for saga ----

import { all } from 'redux-saga/effects';
import RegisterSaga from './register';

export default function* rootSaga() {
    yield all(RegisterSaga()]);
}

Что мне делать, чтобы исправить в коде? 

Application built with
{
  "react": "16.13.0", 
  "react-dom": "^16.13.0", 
  "react-redux": "^7.2.0",
  "redux": "^4.0.4"
  "@material-ui/core": "^4.9.5"
}

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

function* registerFlow (user)

Для указанной выше функции функция registerU получает неопределенный параметр и он ограничивает вызов на стороне сервера.

Я думаю, что проблема связана с этой строкой кода под наблюдателем. 

 const { user } = yield take(REGISTER_REQUESTING);
 const task = yield fork(registerFlow, user);

Я пытался следовать руководствам и искал примеры реализаций для объектов отправки, но не удалось найти рекомендуемый способ решения проблемы.

1 Ответ

0 голосов
/ 09 июля 2020

Так как вы уже отправляете в mapDispatchToProps, вам нужно снова отправлять отправку в onSubmit. 

const onSubmit = (data, e) => {
e.preventDefault();     
props.registerRequest(data);

};

...