Как использовать RedEx в реагировать на получение данных из API - PullRequest
Новая
       7

Как использовать RedEx в реагировать на получение данных из API

0 голосов
/ 27 сентября 2019

Здравствуйте, я только начинаю изучать избыточность и в настоящее время у меня возникла проблема. У меня есть API, из которого я хочу получать информацию и использовать его в различных компонентах. Буду признателен, если вы мне поможете 

import React from 'react';
import { render } from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from "redux-thunk";
import { createLogger } from "redux-logger";
import { BrowserRouter} from "react-router-dom";
import Reducer from './Reducers';

import App from './App';
import fetchSimcards from './Actions/fetchSimcards';

const middleware = [ thunk ];
middleware.push( createLogger() );

const store = createStore(
Reducer
applyMiddleware(...middleware),
);


import * as serviceWorker from './serviceWorker';

store.dispatch(fetchSimcards());

render(
<Provider store={store}>
    <BrowserRouter>
        <App />
    </BrowserRouter>
</Provider>,

document.getElementById('root')
 );

 serviceWorker.unregister();

и это мой файл действий 

import * as type from '../Constans/ActionTypes';

 export const ReceiveSimcards = Simcards => ({
type: type.RECEIVE_SIMCARDS,
Simcards
});

это мой файл редуктора 

import { combineReducers } from "redux";

const Simcards = ( state = {}, action ) => {
console.log( state, action );
return state;
};

export default combineReducers({
Simcards
});

это мой файл контейнера для SIM-карт 

import React, {Component} from 'react';
import SimcardList from "../Component/SimcardList";
import { connect } from "react-redux";

class SimcardContainer extends Component {
render() {
    const Simcards = this.props;
    return (
        <div>
            <SimcardList title={"Simcards"} />
            <div className="TableNumberItem">{Simcards.SimCardNumber}</div>
            <div className="TableNumberItem">{Simcards.SimCardDescription}</div>
            <div className="TableNumberItem">{Simcards.TeammatePrice}</div>
        </div>
    );
}
}

export default connect()(SimcardContainer);

и я хочу показать этоконтейнер на домашней странице

1 Ответ

0 голосов
/ 27 сентября 2019

При использовании избыточного кода вы должны вызывать весь API и обрабатывать логический код в действии.Пример с действием fetchAPI: 

   export const fetchAPI = () = async dispatch => {
        let response = null;
        try {
            response = await axios.get('api/...')
            // Example use axios
            dispatch(fetchSuccess(response.data)) 
            // To handle in reducer with redux
        } catch (error) {
            ... Handle error here
        }
    }
    const fetchSuccess = data => ({
        type: FETCH_SUCCESS,
        data: response.data
    })

И в вашем компоненте вы можете использовать connect для получения состояния и действия: 

    import { bindActionCreators } from 'redux';
    import React, { Component } from 'react';
    import SimcardList from "../Component/SimcardList";
    import { connect } from "react-redux";
    import * as _Actions from '../../action/index'

    class SimcardContainer extends Component {
        componentDidMount(){
            const { fetchAPI } = this.props.actions;
            **fetchAPI();** // Call API here
        }
        render() {
            const { stateReducer} = this.props;
            console.log(stateReducer) 
            // Here, you will see data that you handled in reducer 
            // with action type FETCH_SUCCESS
            // You should remember data that you fetch from API is asynchronous,
            // So you should check like that `data && {do any thing heree}`
            return (
                <div>
                    <SimcardList title={"Simcards"} />
                    <div className="TableNumberItem">{Simcards.SimCardNumber}</div>
                    <div className="TableNumberItem">{Simcards.SimCardDescription}</div>
                    <div className="TableNumberItem">{Simcards.TeammatePrice}</div>
                </div>
            );
        }
    }
    const mapStateToProps = state => ({
        stateReducer: state  
    })
    const mapDispatchToProps = dispatch => ({
        actions: bindActionCreators(_Actions, dispatch)
    })
    export default connect(mapStateToProps, mapDispatchToProps)(SimcardContainer)
...