如何在不重新渲染React组件的情况下更新Redux状态

Question

I have a simple application with two screens:

• Tasks list screen
• Task settings screen

On Tasks list screen I have Button so when I click on it:

1. Dummy task is created in Redux store
2. Go to new Task settings screen with passed task_uuid (this screen changes this dummy task making it real / useful)

This is Button press handler

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 }
  );
}

And this is dummy task structure (payload property in action creator)

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

The reason for this behavior so Task settings don't worry whether task is existing or not (always work with valid task) and can call any property (like tags).

Problem: But before navigating to Task settings I see this new dummy task is showed up on list (it uses title property of task and watches Redux state changes).

Question: How can I avoid that problem? So my Redux state changes will affect only new screen (to which I'm going to navigate) and not my current screen?

Note: This is a snippet of Tasks list component

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

The problem here is that you're performing two separate, sequential state changes in response to a single event.

A big advantage of Redux is the ability to perform multiple state changes, simultaneously, in response to a single action. (This is what it means to say that actions and reducers are loosely coupled.)

I suggest instead of calling navigate separately, to instead have the navigation state change in response to the TASK_CREATED action. If your navigation state lives in a Redux reducer, this change should be easy to implement. If your navigation state lives in a React component, consider how best the change the navigation state in response to a change the Redux store state.