Как извлекать данные каждый раз, когда пользователь открывает экран и обновлять состояние, только если извлеченные данные отличаются от текущих данных в состоянии

Question

Я относительно новичок, чтобы реагировать, реагировать на нативный и избыточный, и у меня есть один вопрос о получении данных из API и обновлении состояния.

Что я хочу сделать, это: - каждый раз, когда пользователь открываетНа экране (т.е. сообщения) я хочу получить данные из API и обновить состояние.

Так что: - Я всегда только что извлеченные данные в состоянии и отображается на экране.

Если я получу данные только в методе жизненного цикла componentDidMount, у меня не всегда будут свежие данные.

Пример: есть два экрана Post и Posts.Если пользователь впервые открывает экран сообщений, тогда запускается componentDidMount, и сообщения извлекаются и обрабатываются.Затем он переходит на экран «Пост», добавляет новое сообщение и возвращается на экран «Посты», после чего он не увидит этот новый пост, поскольку сообщения будут отображаться из состояния, выбранного в методе componentDidMount.

Каков наилучший способсправиться с этим и всегда иметь последние данные?

class Posts extends Component {
    componentDidMount() {
        this.props.fetchPosts();
    }

    componentDidUpdate(prevProps) {
        this.props.fetchPosts();
    }

    render () { ... }
}

const mapStateToProps = state => {
    return {
        posts: state.posts.posts,
        loading: state.posts.loading,
    }
}

const mapDispatchToProps = dispatch => {
     return {
         fetchPosts: () => dispatch(actions.fetchPosts()),
     }
}

export default connect(mapStateToProps, mapDispatchToProps)(Posts)

---

Действие

export const fetchPosts = () => {
    return dispatch => {

         dispatch(fetchStarted());

         apiFetchPosts()
         .then(({data}) => {

             const posts = data.data;

             dispatch(fetched(posts))
         })
         .catch(error => {
             dispatch(fetchFailed(error));
         })
     }
 }

 const fetchStarted = () => {
      return {
         type: actionTypes.POSTS_FETCH_START,
      }
 }

 const fetched = (posts) => {
      return {
           type: actionTypes.POSTS_FETCH_SUCCESS,
           posts,
      }
 }

 const fetchFailed = (error) => {
     return {
         type: actionTypes.POSTS_FETCH_FAILED,
     }
 }

Answer 1

Обновление по мере поступления

В вашем случае вы должны отправить POST запрос на добавление нового сообщения.Этот запрос должен содержать недавно созданную запись в качестве ответа.Вы должны использовать этот ответ, чтобы обновить список сообщений, которые у вас есть в состоянии избыточности.Просто добавьте новое сообщение в список.

То же самое касается удаления сообщений. После отправки запроса DELETE вы также должны удалить это сообщение из состояния.

Добавить таймер

Если вы хотите повторно получать сообщения, когда вы их не получали некоторое время, вам следует реализовать какое-то решение для кэширования:

Когда вы получаете сообщения в первый раз, вы можететакже сохраните метку времени запроса.Когда пользователь заходит на страницу «Сообщения», вы можете проверить, не устарела ли временная метка, например, 5 минут назад, и соответственно обновить ее.

Повторное получение каждый раз

Если вы хотите просто повторно выполнитьотправляя сообщения каждый раз, когда пользователь посещает эту страницу, вы можете использовать хук useEffect или комбинацию componentDidMount и componentDidUpdate.

Обратите внимание:

Вы можете немедленно вызвать setState () в componentDidUpdate (), но учтите, что он должен быть заключен в условие, как в примере выше, иначе вы вызовете бесконечный цикл. Источник

Answer 2

Вы можете использовать componentDidUpdate