使用redux在反应中获取API

Question

我已经开始使用React-native进行redux。我正在尝试从API列出该数据的数据。以下是我从API获取数据的代码。

app.js

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);
const App = () => {
    return (
        <Provider store={store}>  
            <ProductList />
        </Provider>
    );
};
export default App;

productList.js

class ProductList extends React.Component {
  componentDidMount() {
    this.props.dispatch(fetchProducts());
  }
  render() {
    const { products } = this.props;
    return (
      <View>
        {products.map(product => (
          <Text key={product.title}>{product.title}</Text>
        ))}
      </View>
    );
  }
}
const mapStateToProps = state => ({
  products: state.products.items,
});
export default connect(mapStateToProps)(ProductList);

productaction.js

async function getProducts() {
  return fetch("https://rallycoding.herokuapp.com/api/music_albums")
    .then(res => res.json());
}
export function fetchProducts() {
  return async dispatch => {
    return getProducts()
      .then(json => {
        dispatch(fetchProductsSuccess(json));
        return json;
      })
      .catch(error =>
        console.log(error)
      );
  };
}
export const FETCH_PRODUCTS_SUCCESS = "FETCH_PRODUCTS_SUCCESS";
export const fetchProductsSuccess = products => ({
  type: FETCH_PRODUCTS_SUCCESS,
  payload: { products }
});

productreducer.js

  const initialState = {
    items: [],
  };
  export default function productReducer(
    state = initialState,
    action
  ) {
    switch (action.type) {
      case FETCH_PRODUCTS_SUCCESS:
        return {
          ...state,
          items: action.payload.products
        };
      default:
        return state;
    }
  }

rootreducer.js

export default combineReducers({
  products
});

它正常工作。它也显示了列表。

但是，有人可以告诉我，如果我在大项目中使用此方法，那是正确的方法，那将是有用的还是我应该遵循其他方法？预先感谢。

Answer 1

我没有用 fetch与反应生态使用，但是我认为这应该很好。我已经使用了axis。而且易于使用

import * as axios from 'axios';
import Constant from './../utilities/constants';
axios.defaults.baseURL = Constant.api_base_url;;
axios.defaults.headers.post['Content-Type'] = 'application/json';
// Axios interceptor for handling common HTTP errors
// Need to use it with reducers
axios.interceptors.response.use(res => res, err => Promise.reject(error));
/**
 * HTTP request to search item in The MovieDB
 * 
 * @returns {object | Promise}
 */
const getConfiguration = () => {
  return axios.get(`/configuration?${Constant.api_key}`)
}
export { getConfiguration }

您可以查看完整的代码https://github.com/sandimal/reaeact-native-moviedb。