在Redux中获取json数据

const fetchData = () => {
  return (dispatch) => {
    // 在这里进行异步操作，如从服务器获取数据
    fetch('https://example.com/data.json')
      .then(response => response.json())
      .then(data => {
        // 获取到数据后，将数据通过dispatch发送给Redux的reducer
        dispatch({ type: 'FETCH_SUCCESS', payload: data });
      })
      .catch(error => {
        // 处理错误情况
        dispatch({ type: 'FETCH_ERROR', payload: error });
      });
  };
};

const initialState = {
  data: null,
  error: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_SUCCESS':
      return { ...state, data: action.payload, error: null };
    case 'FETCH_ERROR':
      return { ...state, data: null, error: action.payload };
    default:
      return state;
  }
};

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

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

import { connect } from 'react-redux';
import { fetchData } from './actions';

class MyComponent extends React.Component {
  componentDidMount() {
    // 在组件加载完成后，调用获取数据的action
    this.props.fetchData();
  }

  render() {
    // 在组件中使用获取到的数据
    const { data, error } = this.props;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (data) {
      return <div>Data: {JSON.stringify(data)}</div>;
    } else {
      return <div>Loading...</div>;
    }
  }
}

const mapStateToProps = (state) => {
  return {
    data: state.data,
    error: state.error,
  };
};

const mapDispatchToProps = {
  fetchData,
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);