咱們cmdb項目目前是用react reflux 進行構建的,使用起來很是方便javascript
reflux-state-mixin
能夠快速地經過store.setState()
方法修改修改組件之間共享數據。reflux-promise
能夠用action().then().catch()解決異步請求回調固然在使用過程當中也發現了一些問題html
reflux容許多個入口修改store。java
store定義混亂react
爲何使用reduxredux
開始定義一個component的初始數據會定義在getInitialState中promise
getInitialState(){ return { list:[ {id:1,name:'數據1'}, {id:2,name:'數據2'}, {id:3,name:'數據3'}, ] } }
使用redux定義初始數據須要定義在一個reducer中,經過一個函數返回須要獲得的數據性能優化
const initialState =[ {id:1,name:'數據1'}, {id:2,name:'數據2'}, {id:3,name:'數據3'}, ]; function reducer(state = initialState, action) { return state }
經過redux的createStore方法建立惟一的store框架
const store = createStore( reducer )
全部容器組件均可以訪問 Redux store,可使用React Redux 組件 <Provider> 來讓全部容器組件均可以訪問 store,
而沒必要顯示地傳遞它。只須要在渲染根組件時使用便可。dom
import React from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducer' import App from './components/App' let store = createStore(reducer) render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )
定義 mapStateToProps 這個函數來指定如何把當前 Redux store state 映射到展現組件的 props 中。異步
import React from 'react' import { connect } from 'react-redux' let App=React.createClass({ render(){ const {list}=this.props; return( <div> <ul> {list.map((item)=><Item key={item.id} item={item}/>)} </ul> </div> ) } }) const mapStateToProps = (state) => { return { list: state } } export default connect( mapStateToProps, )(App)
export function deleteItem(id)=>{ return { type:'DELETE_ITEM', payload:{ id:id } }; }
const initialState =[ {id:1,name:'數據1'}, {id:2,name:'數據2'}, {id:3,name:'數據3'}, ]; function reducer(state = initialState, action) { switch (action.type) { case 'DELETE_ITEM': return state.filter(item=> item.id !== action.payload.id ) default: return state } }
除了讀取 state,connect()還能分發 action。能夠定義 mapDispatchToProps() 方法,
接收 dispatch() 方法並返回指望注入到展現組件的 props 中的回調方法
import React from 'react'; import {deleteItem} from '../actions/index' import { connect } from 'react-redux' let App=React.createClass({ render(){ const {list,deleteItem}=this.props; return( <div> <ul> {list.map((item)=><Item key={item.id} deleteItem={deleteItem} item={item}/>)} </ul> </div> ) } }) const mapStateToProps = (state) => { return { list: state } } const mapDispatchToProps = (dispatch) => { return { deleteItem: (id) => { dispatch(deleteItem(id)) } } } export default connect( mapStateToProps, mapDispatchToProps )(App)
import React from 'react' let Item=React.createClass({ render(){ const {item}=this.props; return( <li> {item.name}<button onClick={()=>this.props.deleteItem(item.id))}}>刪除</button> </li> ) } }) export default Item