Извлекать API в реагирующе-нативном с использованием приставки - PullRequest
Новая
       40

Извлекать API в реагирующе-нативном с использованием приставки

0 голосов
/ 21 февраля 2019

Я начал с редуксом реагировать на нативный.Я пытаюсь получить данные из 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
});

Работает отлично.Он также показывает список.

Но может ли кто-нибудь сказать мне, является ли это правильным способом, если я буду использовать этот метод в больших проектах, будет ли он полезен или я должен следовать какому-то другому?Заранее спасибо.

1 Ответ

0 голосов
/ 21 февраля 2019

Я не использовал fetch с Reaction-native, но я думаю, что это должно работать нормально.Я использовал 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/SandipNirmal/React-Native-MovieDB.

...