выборка и рендеринг данных автоматически в реагировать

Question

Эй, ребята, у меня есть компонент, в котором у меня есть форма, которая после отправки отправляет действие, которое попадает в post api и сохраняет коллекцию в mongodb. Ниже я получаю все данные из mongodb и отображаю их на экране, но на данный момент я делаю это на didmount. Я вызываю действие, которое получает данные, а затем с помощью редуктора обновляю глобальное состояние, которое отображается здесь. .

Что я хочу, так это как только я отправляю данные формы, я хочу, чтобы мое состояние обновлялось автоматически, поэтому мне нужно обновить sh страницу, чтобы увидеть данные (и когда я обновлю sh у меня уже есть действие, которое вызывается в didmount, не вызывает проблем).

Form. js

class Form extends Component {
  componentDidMount() {
    this.getAllTasks();
  }
  constructor(props) {
    super(props);
    this.state = {
      taskName: "",
      taskDescription: ""
    };
  }
  getTasksInTasksList = () => {
    if (this.props.tasks != undefined) {
      return this.props.tasks.map((item) => {
        return (
          <div key={item._id}>
            <h5>Task Name - {item.taskName}</h5>
            <p>Task Description - {item.taskDescription}</p>
            <p>Task Creator - {item.taskCreator}</p>
            <br/><br/>
          </div>
        );
      });
    }
  };

  getAllTasks = () => {
    this.props.getTask();
  };
  handleSubmit = () => {

     let details = {
      taskName: this.state.taskName,
      taskDescription: this.state.taskDescription,
      taskCreator: this.state.taskCreator,
      taskDuration: this.state.taskDuration,
    };

    this.props.addTask(details);
  };
  render() {
    console.log(this.props.tasks);
    return (
      <div className="m-4">
        <div className="d-flex justify-content-between align-items-center">
          {" "}
          <h2 className=" ">Pomodoro Tasks</h2>
          <button className="btn btn-primary" onClick={()=>this.props.getTask()}>Refresh</button>
        </div>
        <div className="form-group ">
          <label>Task Name</label>
          <input
            type="text"
            value={this.state.taskName}
            className="form-control"
            onChange={(e) => this.setState({ taskName: e.target.value })}
          />
        </div>
        <div className="form-group">
          <label>Task Description</label>
          <input
            type="text"
            value={this.state.taskDescription}
            className="form-control"
            onChange={(e) => this.setState({ taskDescription: e.target.value })}
          />
        </div>



        <button type="submit" className="btn btn-primary" onClick={()=>this.handleSubmit()}>
          Submit
        </button>

        <h2 className="text-center m-5">Tasks List</h2>
        {this.getTasksInTasksList()}
      </div>
    );
  }
}
const mapStateToProps = (state) => {

  return { tasks: state.getPomodoro.tasks };
};
export default connect(mapStateToProps, { addTask, getTask })(Form);

Actions. js

export const addTask = (details) => {
  return async (dispatch ,getState) =>{

    axios.post('/add_task', details)
      .then(function (response) {
        console.log(response);
        dispatch({type:POSTDATA,payload:response.data})
        Swal.fire('Tasks Added !')

      })
      .catch(function (error) {
        Swal.fire('Error in adding to database')
        console.log(error);
      });

  };
};
export const getTask = () => {
  return async (dispatch ,getState) =>{
    axios.get('/get_task')
      .then(function (response) {
        dispatch({type:GETDATA,payload:response.data})
      })
      .catch(function (error) {
        console.log(error);
      });
  };
};
    export default connect(mapStateToProps, { addTask, getTask })(Form);

редуктор. js

const postPomodoro = (state = [], action) => {
  switch (action.type) {
    case POSTDATA:
      return action.payload;

    default:
      return state;
  }
};


const getPomodoro = (state = [], action) => {
  switch (action.type) {

    case GETDATA:
      return {...state,tasks:action.payload};
    default:
      return state;
  }
};
export default combineReducers({
  postPomodoro,getPomodoro
});