Question

我需要每5秒更新一次数据，如何使用Redux操作？现在我使用这种方法，但我不确定这是好主意。也许有更好的方法来做到这一点？我可以在行动中做到吗？谢谢你的回答，对不起我的英语）

class Example extends Component {   
constructor(props) {
super(props);
this.interval = null;
this.state = {
  data: props.data
  }
}

componentDidMount() {
 this.updateData(this.props.id)
}


updateData = currentId => {
this.interval = setInterval(() => {
  this.props.getData(currentId);
}, 5000);
}

componentWillUnmount() {
 const self = this;
 clearInterval(self.interval);
}

componentWillReceiveProps(nextProps) {
  if (this.props.data!== nextProps.data) {
   this.setState({data: nextProps.data});
  } else if(this.props.id !== nextProps.id) {
   this.updateData(nextProps.id)
  }
}  
render() {return(...html here)}
}

export default connect(
 store => ({
data: store.data,
 }),
 {getData}
)(Example);

Answer 1

我认为你设置间隔的方法很好。但是，您无需将props.data复制到州。您可以删除本地状态，并且在渲染方法中，您可以直接引用props.data，并且每次支柱更改时它都会重新渲染。如果您希望在应用程序的生命周期内持续发生此间隔，则可以根据需要将其移至组件层次结构中的更高级别。

Answer 2

我已经重写了你的片段了。您确定需要将props复制到组件的state吗？如果您只是基于道具进行渲染，并且状态永远不会改变，那么您不必这样做。

我还假设代码中的getData是一个redux动作创建者，在其他地方定义。

你写的setInterval逻辑大多是正确的我会说。只要组件存在，您就希望每5秒调度一次Redux操作。很公平。

class Example extends Component {
    constructor(props) {
        super(props);

        this.interval = null;
    }

    componentDidMount() {
        this.pollForData(this.props.id)
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.id !== nextProps.id) {
            this.pollForData(nextProps.id);
        }
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    pollForData(id) {
        // First clear old interval if one exists
        if (this.interval) {
            clearInterval(this.interval);
        }
        this.interval = setInterval(
            () => this.props.getData(id),
            5000
        );
    }

    render() {
        return (...html here)
    }
}

const mapStateToProps = state => ({
    data: state.data,
    id: // ? was this missing in your code? where is this.props.id coming from?
});

const mapDispatchToProps = dispatch => ({
    getData // I'm assuming you defined this somewhere else
});

export default connect(mapStateToProps, mapDispatchToProps(Example);

Answer 3

我怎样才能使用Redux操作？

使用redux async操作。

安装redux thunk。

this.interval = setInterval(() => {
    return dispatch => {
        dispatch({
            type: "GET_DATA",
            Id: currentId
        })
    }
}, 5000);

在REDUCERS类中，再定义一个将调用

的操作类型GET_DATA 带有以上签名的

getData。

使用React / Redux动态更新数据

3 个答案: