如何從文件加載數據反應？

我試圖使用redux-thunk你能告訴我如何調用load功能我想從反應過來，咚從文件中獲取數據，這裏是我的代碼從文件加載數據 https://plnkr.co/edit/bcGI7cHjWVtlaMBil3kj?p=preview 如何從文件加載數據反應？

const thunk = ReduxThunk.default; 
const abc= (state={},action) => { 
    console.log('in redux', action.type) 
    switch(action.type){ 
    case 'GET_DATA': 
     return action 
     default : 
     return state; 
    } 
} 
const {createStore,bindActionCreators ,applyMiddleware } =Redux; 
const {Provider,connect} =ReactRedux; 

const store = createStore(abc, 
applyMiddleware(thunk) 
); 

class First extends React.Component { 
    constructor (props){ 
    super(props); 

    } 

    getDate(){ 
    this.props.getData(); 
    } 
    render(){ 
    return (
    <div> 
     <button onClick={this.getDate.bind(this)}>GET DATA</button> 

    </div> 
    ) 
    } 
} 

const actions = { 
    getData:() => { 
     return { 
      type: 'GET_DATA', 
     } 
    } 
}; 

function loadSuccess(data){ 
    return {type :"LOAD_DATA",data} 
} 
    function load(){ 
    return dispatch => { 
     return axios.get('data.json').then(data=>{ 
      return dispatch(loadSuccess(data)); 
     }) 
    } 
} 

const AppContainer = connect(
    function mapStateToProps(state) { 
     return { 
      digit: state 
     }; 
    }, 
    function mapDispatchToProps(dispatch) { 
     return bindActionCreators(actions, dispatch); 
    } 
)(First); 
ReactDOM.render(
    <Provider store={store}> 
    <AppContainer/> 
    </Provider> 
    ,document.getElementById('root'))

來源

2016-12-28 user944513

Redux Thunk中間件允許您編寫返回函數而不是動作的動作創建器。 thunk可以用來延遲一個動作的發送，或者只在滿足某個條件時才發送。內部函數接收存儲方法dispatch和getState作爲參數。

加載操作創建者應該返回一個執行數據異步請求的函數。當從文件中解析數據異步請求，形實轉換就可以調度，更新店內的動作：

const { createStore, bindActionCreators, applyMiddleware } = Redux; 
const { Provider, connect } = ReactRedux; 
const thunk = window.ReduxThunk.default; 

const abc = (state={}, action) => { 
    switch (action.type) { 
    case 'SET_DATA': 
     return action.payload; 
    default: 
     return state; 
    }; 
}; 

const store = createStore(abc, applyMiddleware(thunk)); 

class First extends React.Component { 
    constructor (props){ 
    super(props); 
    this.getData = this.getData.bind(this); 
    } 

    getData(){ 
    this.props.load(); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.getData}>GET DATA</button> 
     <pre>{JSON.stringify(this.props.data)}</pre> 
     </div> 
    ); 
    } 
} 

const actions = { 
    load:() => { 
    return (dispatch) => { 
     return axios.get('data.json').then((response) => { 
     dispatch({ 
      type: 'SET_DATA', 
      payload: response.data, 
     }); 
     }); 
    }; 
    } 
}; 

const mapStateToProps = (state) => ({ 
    data: state 
}); 

const mapDispatchToProps = (dispatch) => ({ 
    load: bindActionCreators(actions.load, dispatch), 
}); 

const AppContainer = connect(mapStateToProps, mapDispatchToProps)(First); 

ReactDOM.render(
    <Provider store={store}> 
    <AppContainer/> 
    </Provider> 
    ,document.getElementById('root'));

https://embed.plnkr.co/mJQtEye8SOtXna26XEf7/

來源

2016-12-28 07:36:03 DTing

如何從文件加載數據反應？

回答

相關問題