什麼是使用react-redux與基於事件的第三方庫的最佳方式

將視圖連接到不斷分派事件的庫的最佳方式是什麼？我在redux真實世界的例子中看到，最好使用mapDispatchToProps並注入加載操作。在我們的情況下，我們需要監聽事件隨時間發送。我認爲我們可以使用中間件來做到這一點，但我不是100％確定的。還有其他的選擇是在動作創作者本身內部進行傾聽。什麼是使用react-redux與基於事件的第三方庫的最佳方式

任何想法？

// app.jsx

<div> 
    <MyCollection name="ONE" /> 
    <MyCollection name="TWO" /> 
</div>

//我-collection.jsx

import {load} from './actions'; 

class MyCollection extends React.Component { 
    componentDidMount() { 
    this.props.load(this.props.name); 
    } 

    componentDidUpdate(prevProps) { 
    if(prevProps.name !== this.props.name) { 
     this.props.load(this.props.name); 
    } 
    } 

    render() { 
    return (
     <div>{this.props.name}: {this.props.value}</div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    value: state.value 
    } 
} 

const mapDispatchToProps = { 
    loadAndWatch 
} 

connect(mapStateToProps, mapDispatchToProps)(MyCollection);

// actions.js

import {MyCollection} from '@corp/library'; 

export function load(name) { 
    return (dispatch, getState) => { 
    MyCollection.getValue(name, value => { 
     dispatch(setValue(name)); 
    }) 
    } 
} 

export function setValue(name) { 
    return { 
    type: 'SET_VALUE', 
    name 
    } 
}

// reducer.js

function reducer(state, action) { 
    switch(action.type) { 
    case 'SET_WATCHING': 
     return Object.assign({}, state, {isWatching: true}); 
    case 'SET_VALUE': 
     return Object.assign({}, state, {value: action.value}); 
    default: 
     return state; 
    } 
}

個

// middleware.js

import {setValue} from './actions'; 

function middleware({dispatch, getState}) { 
    return next => action => { 
    switch (action.type) { 
     case 'SET_VALUE': 
     next(action); 

     if (getState().isWatching) { 
      return; 
     } 

     MyCollection.addChangeListener(name, value => { 
      dispatch(setValue(name)) 
     }); 

     dispatch({type: 'SET_WATCHING'});  
    } 
    } 
}

來源

2016-04-20 camwest

最好的方法是在初始化商店後訂閱事件，然後監聽器會觸發一個操作並且數據會改變。 –

@BlairAnderson問題是我不知道在init時要聽什麼事件。這取決於使用哪些視圖組件等等。我們的應用程序中有100多種可能的事件。 – camwest

您應該在'componentDidMount'內部訂閱，然後在'componentWillUnmount'內部取消訂閱。在訂閱你的活動時，你應該派遣行動去減少。看起來你的應用程序架構並不是完全適合react/redux世界的，因爲自定義事件過於靈活和模糊。 –

我相信redux-observable是你在找什麼，如果你不想用國產中間件到過分複雜化您的應用程序。

來源

2017-05-28 22:39:58

什麼是使用react-redux與基於事件的第三方庫的最佳方式

回答

相關問題