使用React / Redux动态更新数据

Question

I need to update data every 5 seconds, how can I do it with Redux actions? Now I use this approach, but Im not sure that it is good idea. Maybe there are better ways to do it? Can I do it in actions? Thanks for answers and sorry for my English)

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

I think what you have is good in terms of the approach of setting an interval. However, there is no need to copy your props.data into state. You can remove the local state, and in your render method, you can directly reference props.data and it will re-render every time the prop changes. If you want this interval to happen continuously through the lifetime of your app, you can move it to a higher level in the component hierarchy, if you want.

Answer 2

I've rewritten your snippet a little bit. Are you sure you need to copy props into the state of the component? If you're just rendering based on the props, and the state is never changed, you don't have to do this.

I'm also assuming that getData in your code is a redux action creator, defined somewhere else.

The setInterval logic you wrote is mostly correct I'd say. You want to dispatch a Redux action every 5 seconds, as long as the component lives. Fair enough.

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

how can I do it with Redux actions?

Use redux async action.

install redux thunk .

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

In REDUCERS class,define one more action type GET_DATA which will call

getData with above signature.