使用redux将boolean设置回原始状态并做出反应

时间:2017-03-14 01:41:45

标签: reactjs redux

我有以下场景,我在获取数据之前使用Preloader,然后成功时将布尔值设置为false,然后将数据拉入。所有这些工作正常,但是当使用时单击事件并再次调度,一切正常,布尔值不会返回到它原来的状态,这将是'true'。关于我需要做什么的任何想法重新设定它?

App.jsx

....

const mapStateToProps = (state) => ({ fetching: state.flickr.fetching, flickr: state.flickr.flickr })
const mapDispatchToProps = (dispatch) => bindActionCreators({fetchFlickr}, dispatch)

class Prices extends Component {

  constructor(props) {
    super(props);
  }

  onChange(sorter) {
    console.log('params', sorter);
  }

  componentDidMount() {
    socket.on('get-data-back', (data) => {
      let that = this;
      if (data) {
         this.props.fetchFlickr(); 
      }
    })

  }
  handleClick(e) {

    { this.props.fetching ? false : true } ----- Reset my value?
    socket.emit('fetchData');
  }


  render() {
    const { fetching } = this.props;
    return (
      <div>
        <Spin spinning={fetching} delay={500} />
     <button onClick={(e) => this.handleClick(e)}>Refresh</button>
      </div>
    )    
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Prices); 

Reducer.jsx:

const initialArray = {flickr: [], fetching: true, fetched: false, error: null}

function flickr(state=initialArray, action) {
    switch (action.type) {
      case "FETCH_FLICKR": {
        return {...state, fetching: true}
      }
      case "FETCH_FLICKR_REJECTED": {
        return {...state, fetching: false, error: action.payload}
      }
      case "FETCH_FLICKR_FULFILLED": {
        return {
          ...state,
          fetching: false,
          fetched: true,
          flickr: action.payload,
        }
      }


    return state
}
export default flickr;

0 个答案:

没有答案