CODEWITHSUNDEEP
reactjsreduxreact-redux
Arian
Arian

Reputation: 7719

Handle POST request when using react-redux

I have a NewGroup component, that makes a POST call to the backend. When call is returned, an action is dispatched accordingly and the app state is updated by the reducer.

BUT! the component NewGroup doesn't know id of the newly created entity to look for it in the updated state.

How should I deal with this situation ?

Some code:

This is the reducer: 

import { FETCH_GROUPS_SUCCESS, FETCH_GROUPS_ERROR, CREATE_GROUP_SUCCESS, CREATE_GROUP_ERROR, DELETE_GROUP, FETCH_GROUP_SUCCESS, FETCH_GROUP_ERROR } from '../actions/creators';

export const FULL_GROUP = 'full_group';
export const SNIPPET_GROUP = 'snippet_group';

const INITIAL_STATE = {
  data: null,
  isLoading: true,
  errorFetching: null
};

export default function(state=INITIAL_STATE, action) {
  switch(action.type) {
    case FETCH_GROUPS_SUCCESS:
      return {
        data: _.zipObject(_.map(action.payload, group => group.id),
          _.map(action.payload, group => ({
              data: group,
              isLoading: true,
              errorFetching: null,
              mode: SNIPPET_GROUP
          }))
        ),
        isLoading: false,
        errorFetching: null
      };
    case FETCH_GROUPS_ERROR:
      return {
        data: null,
        isLoading: false,
        errorFetching: action.payload.error
      };
    case CREATE_GROUP_SUCCESS:
      return { ...state, [action.payload.id]: {
        data: action.payload,
        isLoading: true,
        errorFetching: null,
        mode: SNIPPET_GROUP
      }};
    case CREATE_GROUP_ERROR:
      return { ...state, [action.payload.id]: {
        data: null,
        isLoading: false,
        errorFetching: action.payload.error
      }};
    default:
      return state;
  }
}

This is the NewGroup component: 

class NewGroup extends Component {

  _onSubmit(values) {
    this.props.createGroup(values);
  }

  render() {
    const { handleSubmit } = this.props;
    //id of the newly created/errored entity on the backend is unknown and there was it cannot be accessed here.
    return (
      <div>
        <form onSubmit={handleSubmit(this._onSubmit.bind(this))}>
          <Field name="name" label="Name" type="text" fieldType="input" component={renderField.bind(this)}/>
          <Field name="description" label="Description" type="text" fieldType="input" component={renderField.bind(this)}/>
          <button type="submit" className="btn btn-primary">Create</button>
          <button type="button" className="btn btn-primary" onClick={() => this.props.history.push('/group')}>Cancel</button>
        </form>
      </div>
    );
  }
}

export default reduxForm({
  validate,
  //a unique id for this form
  form:'NewGroup',
  validators
})(
  connect(null, { createGroup })(NewGroup)
);

The fact that this is a redux-form is not important here.

Upvotes: 0

Views: 1315

Answers (1)

Arber Sylejmani
Arber Sylejmani

Reputation: 2108

You can store the id in your redux store (say, newlyAddedSomethingId: 'yourID', once it is created, on POST success, dispatch another action (or you could even do it in the same reducer, depends on how you have it setup) to store the id then pass it down to the component. That way your component will re-render once the value in redux store is updated from POST, thus your component knows the ID.

Upvotes: 1

Related Questions