Обновление состояния при каждом почтовом запросе - PullRequest
Новая
       13

Обновление состояния при каждом почтовом запросе

2 голосов
/ 23 апреля 2020

Привет, ребята, у меня есть форма в моем проекте Reaction Redx, поэтому при отправке формы я вызываю действие, которое нажимает post api для вставки документа в mongodb, поэтому я также хочу обновлять состояние каждый раз, чтобы как только я отправил форму мое состояние обновляется, а затем я отображаю их ниже (в виде массива объектов)

Форма. js

class Form extends Component {

  constructor(props) {
    super(props);
    this.state = {
      taskName: "",
      taskDescription: "",

    };
  }



  handleSubmit = () => {
    this.props.addTask(this.state);
  };
  render() {
    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={()=>window.location.reload()}>Refresh</button>
        </div>
        <form>
        <div className="form-group ">
          <label>Task Name</label>
          <input
            type="text"
            className="form-control"
            onChange={(e) => this.setState({ taskName: e.target.value })}
          />
        </div>
        <div className="form-group">
          <label>Task Description</label>
          <input
            type="text"
            className="form-control"
            onChange={(e) => this.setState({ taskDescription: e.target.value })}
          />
        </div>


        </form>

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

       ////render here the state
      </div>
    );
  }
}
const mapStateToProps = (state) => {

  return state
};
export default connect(mapStateToProps, { addTask })(Form);

Действия. js

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

    axios.post('/add_task', details)
      .then(function (response) {
        Swal.fire('Tasks Added !')
        dispatch({type:POSTDATA,payload:response.data})
      })
      .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);
      });
  };
};

Редуктор. js

const postPomodoro = (state = [], action) => {
  switch (action.type) {
    case POSTDATA:
      return action.payload; //well this is only returning one object that is inserted at that time i need to 
somehow get all the previous data too that are inserted in order to update state with all data and then render it.

    default:
      return state;
  }
};
const getPomodoro = (state = [], action) => {
  switch (action.type) {

    case GETDATA:
      return {...state,tasks:action.payload};
    default:
      return state;
  }
};

Я попробовал это в редукторе, как 

 case POSTDATA:
      return {...state,task:action.payload};

, но это также возвращает мне последние данные, которые вставляются не все данные, которые были вставлены ранее

1 Ответ

1 голос
/ 23 апреля 2020

Вам необходимо объединить данные в состоянии, а не переопределять их. Используйте синтаксис расширения в вашем редукторе, чтобы добиться этого, как показано ниже 

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

    default:
      return state;
  }
};

После обновления состояния в редукторе вы можете получить к нему доступ в компоненте, используя connect и mapStateToProps 

const Comp = (props) => {
   // iterate over props.postTask and render
}
const mapStateProps = (state) => {
   return {
      postTask: state.postPomodoro
   }
}
export default connect(mapStateToProps)(Comp)
...