如何在反应中从文件加载数据？

Question

我正在尝试使用 redux-thunk 从文件加载数据你能告诉我如何调用 load 函数吗我想从 react-thunk 的文件中获取数据这是我的代码 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'))

Answer 1

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

加载操作创建者应该return 一个执行数据异步请求的函数。当对文件中的数据的异步请求得到解决时，thunk 可以调度更新存储的操作：

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/

如何在反应中从文件加载数据？

how to load data from file in react?

reactjs

react-router

redux

redux-thunk

react-redux