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

时间:2018-11-02 23:03:56

标签: reactjs react-native redux react-redux react-navigation

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

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

任务列表屏幕上,我具有 按钮 ,因此,当我单击它时:

    在Redux商店中创建了
  1. Dummy 任务
  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 }
  );
}

这是 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);

1 个答案:

答案 0 :(得分:0)

这里的问题是您要响应单个事件执行两个单独的顺序状态更改。

Redux的一大优点是能够响应单个动作同时执行多个状态更改。 (这就是说动作和减速器是松散耦合的。)

我建议不要单独调用导航,而应根据TASK_CREATED的动作更改导航状态。如果您的导航状态位于Redux reducer中,则此更改应该易于实现。如果您的导航状态位于React组件中,请考虑如何最好地更改导航状态以响应Redux存储状态的更改。