Skip to content
This repository has been archived by the owner on Aug 23, 2022. It is now read-only.

React-redux-form edit when initial data delayed #1019

Open
ghost opened this issue Nov 18, 2017 · 9 comments
Open

React-redux-form edit when initial data delayed #1019

ghost opened this issue Nov 18, 2017 · 9 comments

Comments

@ghost
Copy link

ghost commented Nov 18, 2017

The Problem

When data come from remote server promise middleware used to set to state. I can see data fill table
but when I try to submit it I get all validators errors as form still have all fields empty.

Steps to Reproduce

https://bitbucket.org/IndoVanja/react-redux-form-edit-delayed-get/overview
Just clone repo, install npm packages, npm run build, npm start

Expected Behavior

Form state changes when data of model set in state, therefore triggering validation and whatever else needed.

Actual Behavior

Model data changes, input fields in form get filled, form data still empty in state, validators report errors on submit. In order to submit one needs to click on each field first, so data filled gets validated.

Reproducible Code Example

https://bitbucket.org/IndoVanja/react-redux-form-edit-delayed-get/overview

Additional note: I don't really understand from docs how all this stuff working, why I can't myself issue model or form actions, how to be sure that actions will be processed by form and not model, where to put model reducers, are models and forms changed apart from general app state, all super confusing.

@davidkpiano
Copy link
Owner

You're gonna have to point me to the exact code (please copy-paste it here) that is doing the model loading. However, I'm pretty sure this is fixed by eb18aa8 which fixed #1020

@ghost
Copy link
Author

ghost commented Nov 18, 2017

export const getUserData = () => (dispatch, getState) => {
  const payload = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: 'Ivan',
        email: 'a.b@gmail.com'
      })
    }, 3000);
  });

  dispatch({ type: ACTIONS.GET_USER_DATA, payload });
};

Then

export const defaultState = {
  name: '',
  email: ''
};

const mainReducer = (state = defaultState, action) => {
  switch (action.type) {
    case `${ACTIONS.GET_USER_DATA}_FULFILLED`:
    case `${ACTIONS.SET_USER_DATA}_FULFILLED`:
      return setUserData(state, action.payload);

    case `${ACTIONS.GET_USER_DATA}_REJECTED`:
    case `${ACTIONS.SET_USER_DATA}_REJECTED`:
      console.error(action.payload);
      return state;

    default:
      return state;
  }
};

function setUserData(state, { name, email }) {
  return {
    ...state,
    name,
    email
  };
}

And that is relation with form model

import { combineReducers } from 'redux';
import main from 'redux/modules/main/mainReducer';
import { combineForms, createForms } from 'react-redux-form';

const rootReducer = combineReducers({
  main,
  ...createForms({
    user: main
  })
});

export default rootReducer;

I tried to make whole app state to be used in form too, still the same.

@ghost
Copy link
Author

ghost commented Nov 18, 2017

Huh that commit was 12 minutes ago?

@ghost
Copy link
Author

ghost commented Nov 18, 2017

Not works in my case, upgraded package to latest.

@davidkpiano
Copy link
Owner

Not works in my case, upgraded package to latest.

Hasn't been released yet. You can fork the repo or add the GitHub link directly in package.json to test it.

@ghost
Copy link
Author

ghost commented Nov 19, 2017

Alright

@akshygupt
Copy link

@davidkpiano has this been released yet?

@davidkpiano
Copy link
Owner

There have been many releases since this issue. @akki199421 Are you not seeing this in the current version?

@akshygupt
Copy link

i switched to the latest release but i am still getting this problem.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants