response-redux connect with Formik - превышен максимальный размер стека вызовов - PullRequest
Новая
       19

response-redux connect with Formik - превышен максимальный размер стека вызовов

0 голосов
/ 24 ноября 2018

Я получаю бесконечный цикл, когда пытаюсь подключить свой компонент формы к избыточному.Было бы смешно, если бы это не расстраивало, потому что код работал раньше сегодня, а теперь нет после того, как я вернул 1 коммит.

Код был почти таким же, и connect () () работал, и у меня была функция signUserUp, доступная как prop для работы.Я удалил node_modules и package-lock на всякий случай и установил все заново, и это то же самое.

Registration.js 

import { connect } from "react-redux";
import signupActions from "../modules/signup";

function Signup() {
  return <BasicForm />
}

const BasicForm = () => (
  <Formik
    initialValues={{ email: "", password: "", confirmPassword: "" }}
    validationSchema={signupSchema}
    onSubmit={(values, actions) => {
      console.log("form data: ", values);
    }}
    render={({ values, errors, touched, isSubmitting, handleChange, handleBlur, handleSubmit }) => (
      <Container>
        <Form onSubmit={handleSubmit}>
          <Form.Input
            type="text"
            placeholder="Email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
            name="email"
          />
          {errors.email && touched.email && <div>{errors.email}</div>}

          <Form.Input
            type="password"
            placeholder="Password"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.password}
            name="password"
          />
          {errors.password && touched.password && <div>{errors.password}</div>}

          <Form.Input
            type="password"
            placeholder="Confirm Password"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.confirmPassword}
            name="confirmPassword"
          />
          {errors.confirmPassword && touched.confirmPassword && <div>{errors.confirmPassword}</div>}

          <Button primary type="submit" onSubmit={handleSubmit} disabled={isSubmitting}>
            Submit
          </Button>
        </Form>
      </Container>
    )}
  />
);

export default connect(
  null,
  signupActions
)(Signup);

Я получаю ошибку здесь, очевидно, когдая добавляю соединение ...

Это единственный файловый модуль с редуксом signup.js 

import api from '../utils/api';

const SIGN_UP = 'signup/SIGN_UP';

const initialState = {
  isAuthenticated: false,
  jwt: '',
  authError: '',
  formErrors: [],
};

export default (state = initialState, action = {}) => {
  switch (action.type) {
    case SIGN_UP:
      return { ...state, isAuthenticated: true, jwt: action.payload, authError: '', formErrors: [] };
    default:
      return state;
  }
};

export const signup = token => ({
  type: SIGN_UP,
  payload: token,
});

export const signUserUp = credentials => {
  return dispatch => api.post('auth/signup', credentials).then(token => dispatch(signup(token)));
};

In rootReducer.js iимпортируйте этот signupReducer следующим образом 

import signupReducer from './modules/signup';

export default combineReducers({
  signup: signupReducer,
});

. Вот пример codesandbox , чтобы увидеть ошибки, по крайней мере, когда я пытаюсь посетить страницу регистрации.

1 Ответ

0 голосов
/ 24 ноября 2018

Проблема заключалась в том, как вы применяли signupActions (который по умолчанию экспортировался как reducer, а не action creator) в connect.

Рабочий пример (с примечаниями ниже): https://codesandbox.io/s/4rook7ryv4

Примечания:

Отделите containers от вашего components: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Разделите ваши actions, reducers и types.

Я реструктурировал ваше приложение, чтобы его было легче понять / прочитать.Я настоятельно рекомендую вам использовать этот поток и структуру, перечисленные ниже (или, если вы хотите быть более модульным со своими компонентами / представлениями, объединить все, что связано с этим компонентом / представлением, в одну папку - это было бы лучше, если бывы работаете в большой команде). 

├── build
|   ├── css
|   |   ├── main.[contenthash:8].css
|   |   └── main.[contenthash:8].css.map
|   ├── js
|   |   ├── main.[hash].js
|   |   └── main.[hash].js.map
|   ├── media
|   |   └── [hash].[ext]
|   └── favicon.ico
|   └── index.html
|
├── public
|   ├── favicon.ico
|   └── index.html
|
├── src
|   ├── actions
|   ├── components
|   ├── containers
|   ├── images
|   ├── reducers
|   ├── routes
|   ├── store
|   ├── styles
|   ├── tests
|   ├── types
|   ├── utils
|   ├── views
|   ├── index.js
|   ├── serviceWorker.js
|   └── setupTests.js
|
├── .eslintrc
├── .gitignore
├── README.md
├── package.lock.json
└── package.json
...