Как обновить состояние Redux без повторного рендеринга компонента React

Question

У меня есть простое приложение с двумя экранами:

• Список задач Экран
• Настройки задач Экран

Вкл. Список задач Экран У меня есть Кнопка , поэтому при нажатии на нее:

1. Пустышка Задание создано в магазине Redux
2. Перейти к новым Настройки задачи Экран с пропущенным task_uuid (этот экран изменяет эту фиктивную задачу, делая ее реальной / полезной)

Это обработчик нажатия кнопки

onButtonPress() {
  const task_uuid = this.props.createTask().payload.uuid;
  console.log(`[ON BUTTON PRESS] Task uuid: [${task_uuid}]`);
  this.props.navigation.navigate(
    'TaskSettingsScreen', { task_uuid }
  );
}

И это пустышка структура задачи (свойство полезной нагрузки в создателе действия)

export const createTask = () => {
    return {
        type: TASK_CREATED,
        payload:  {
            "uuid": uuidv4(),
            "title": "",
            "tags": [],
            "is_completed": false
        }
    };
};

Причина такого поведения: Настройки задачи Не беспокойтесь о том, существует задача или нет (всегда работайте с допустимой задачей) и можете вызывать любое свойство (например, теги).

Проблема: Но прежде чем перейти к Настройки задачи Я вижу это Новая фиктивная задача отображается в списке (она использует title свойство задачи и отслеживает изменения состояния Redux).

Вопрос: Как мне избежать этой проблемы? Таким образом, мои изменения состояния Redux будут влиять только на новый экран (к которому я буду перемещаться), а не на мой текущий экран?

Примечание: Это фрагмент Список задач компонент

import React, { Component } from "react";
import { View, FlatList, Text } from "react-native";
import { connect } from "react-redux";
import TaskItem from "./TaskItem";

class TaskList extends Component {
  constructor(props) {
    super(props);
    this.renderItem = this.renderItem.bind(this);
  }

  renderItem({ item }) {
    return <TaskItem task={item} />;
  }

  render() {
    const { tasks } = this.props;
    return (
      <View>
        <FlatList
          data={tasks}
          keyExtractor={task => task.uuid}
          renderItem={this.renderItem}
        />
      </View>
    );
  }
};

const mapStateToProps = state => {
  const { tasks } = state;
  return { tasks };
};

export default connect(mapStateToProps)(TaskList);

Answer 1

Проблема в том, что вы выполняете два отдельных последовательных изменения состояния в ответ на одно событие.

Большим преимуществом Redux является возможность одновременного выполнения нескольких изменений состояния в ответ на одно действие. (Это то, что значит сказать, что действия и редукторы слабо связаны.)

Я предлагаю вместо вызова навигации по отдельности вместо этого менять состояние навигации в ответ на действие TASK_CREATED. Если ваше состояние навигации находится в редукторе Redux, это изменение должно быть легко осуществимо. Если ваше состояние навигации находится в компоненте React, подумайте, как лучше всего изменить состояние навигации в ответ на изменение состояния хранилища Redux.