如何在React-Redux中更改状态时关闭模态对话框？

Question

Basically, I want to change the UI state in the Component when the Global state has been changed in the Redux-Store.

My scenario is as follow:

1. Show the Modal Form when a user clicks a "Add Student" button
2. Show "Saving..." when user clicks "Save" button
3. If an error occurs, the dialog should stay open and show Error
4. If insertion is ok, the dialog should be closed automatically

I have achieved the first 3 points, but I'm stuck at the 4th point and don't know how to implement the Close feature after the successful insertion.

I would like to run the following example code whenever isSubmitting/error has been changed in the Redux-Store. But, I don't know where to run it. I tried to put it in the render() method, but it doesn't work and I couldn't open the dialog anymore.

Code to Check and Close the Modal

if (isSubmitting === false && error === null)
     this.setState({ add: false });

I don't want to lift that UI state (Eg. IsModalOpen - bool) into the Global Redux store. I have already put the UI state 'isSubmitting' into Redux and I don't want to keep adding UI states into the Redux Store.

Could you please suggest me how I can close the dialog after the successful insertion?

I put the sample code on the CodeSandbox and it's here

Reducer

const initialState = {
      isSubmitting: false,
      error: null,
      student: null
    };

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case "STUDENT_ADD_BEGIN": {
      return {
        ...state,
        isSubmitting: true
      };
    }
    case "STUDENT_ADD_SUCCESS": {
      return {
        ...state,
        student: action.payload,
        error: null,
        isSubmitting: false
      };
    }
    case "STUDENT_ADD_ERROR": {
      return {
        ...state,
        isSubmitting: false,
        error: action.error,
        student: null
      };
    }
    default:
      return state;
  }
}

export default rootReducer;

Container/Page

class addStudentPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: [],
      add: false,
      edit: false,
      dataItem: {}
    };
  }

  getInitialState() {
    return {
      id: "",
      name: "TTCG"
    };
  }

  componentDidMount() {
    this.setState({
      dataItem: this.getInitialState()
    });
  }

  toggleAdd = () => {
    this.setState(prevState => ({
      add: !prevState.add
    }));
  };

  showAddNew = () => {
    this.toggleAdd();

    this.setState({
      dataItem: this.getInitialState()
    });
  };

  updateItemState = event => {
    const field = event.target.name;
    const value = event.target.value;
    let item = this.state.dataItem;

    item[field] = value;

    return this.setState({ dataItem: item });
  };

  handleAddNew = () => {
    let item = this.state.dataItem;
    item["id"] = uuid.v4();
    console.info(item);
    this.props.addStudentAction(item);
  };

  render() {
    const { isSubmitting, error } = this.props;

    return (
      <Container>
        <h1>Students</h1>
        <Button onClick={this.showAddNew} color="link">
          Add New Student
        </Button>
        {this.state.add && (
          <AddStudent
            toggle={this.toggleAdd}
            modal={this.state.add}
            item={this.state.dataItem}
            onChange={this.updateItemState}
            onAddNew={this.handleAddNew}
            isSubmitting={isSubmitting}
            error={error}
          />
        )}
        {this.props.student && (
          <h6>You have added a new student named: {this.props.student.name}</h6>
        )}
      </Container>
    );
  }
}

const mapStateToProps = state => {
  return {
    isSubmitting: state.studentReducer.isSubmitting,
    error: state.studentReducer.error,
    student: state.studentReducer.student
  };
};

const mapDispatchToProps = {
  addStudentAction: item => addStudentAction(item)
};

Modal Form

export default class StudentAdd extends Component {
  render() {
    const {
      modal,
      toggle,
      item,
      onChange,
      onAddNew,
      isSubmitting,
      error
    } = this.props;

    return (
      <Modal isOpen={modal} toggle={toggle} centered>
        <ModalHeader toggle={toggle}>Add New Student</ModalHeader>
        <ModalBody>
          {error && <Alert color="danger">{error}</Alert>}
          <Form>
            <FormGroup>
              <Label for="Name">Name</Label>
              <Input
                type="text"
                name="name"
                id="Name"
                value={item.name}
                onChange={onChange}
              />{" "}
              type 'error' to simulate error
            </FormGroup>
          </Form>
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={onAddNew} disabled={isSubmitting}>
            {isSubmitting ? "Saving..." : "Save"}
          </Button>{" "}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    );
  }
}

UPDATES

It can be achieved by using componentDidUpdate lifecycle method as below: please be careful that you check the props and states correctly before deriving the state.

componentDidUpdate(prevProps) {
    const { isSubmitting, error } = this.props;
    if (isSubmitting !== prevProps.isSubmitting || error !== prevProps.error) {
      if (isSubmitting === false && error === null)
        this.setState({ add: false });
    }
  }

Or you can use getDerivedStateFromProps lifecycle method to re-calculate the props. But I found it difficult to use than componentDidUpdate .

Answer 1

It is bit more complex and clumsy to achieve that, but you can still force that behavior as follow:

Using Promise on your action:

export const addStudentAction = item => {
    return function(dispatch) {
        dispatch({ type: 'STUDENT_ADD_BEGIN' });

        setTimeout(() => {
            if (item.name !== 'error') {
                // HERE
                Promise.resolve(
                    dispatch({ type: 'STUDENT_ADD_SUCCESS', payload: item })
                );
                dispatch(closeModal('AddStudentModal'));
            } else {
                // HERE
                Promise.resolve(
                    dispatch({
                        type: 'STUDENT_ADD_ERROR',
                        error: 'Intentional Error Message'
                    })
                );
            }
        }, 1000);
    };
};

Will let you chain your setState and close the modal right after saving the item:

handleAddNew = () => {
    let item = this.state.dataItem;
    item['id'] = uuid.v4();
    this.props.dispatch(addStudentAction(item)).then(() => {
        console.log('boom');
        this.setState({ add: false });
    });
};

Note that in order to do so, you will need to use dispatch on your actions explicitly for each action, instead of using mapDispatchToProps .

I have modified the codesandbox so you can inspect the desired behavior.