Question

我有一个带有两个屏幕的简单应用程序：

任务列表屏幕
任务设置屏幕

在任务列表屏幕上，我具有按钮，因此，当我单击它时：

Dummy 任务
转到新的任务设置屏幕，其中已传递 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 }
  );
}

这是 dummy 任务结构（动作创建者中的有效载荷属性）

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 reducer中，则此更改应该易于实现。如果您的导航状态位于React组件中，请考虑如何最好地更改导航状态以响应Redux存储状态的更改。

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

1 个答案: