React + Redux + Axios не загружает компонент после создания действий - PullRequest
Новая
       7

React + Redux + Axios не загружает компонент после создания действий

0 голосов
/ 12 мая 2018

Я пытаюсь использовать API, который я создал, я следовал коду, который использовал ранее, но когда компонент загружен, так как список json пуст, он показывает и пустой список, который я вижу взарегистрируйте, что список загружается впоследствии, но не обновляется или что-либо на компоненте.Я попытался добавить подтверждение, что если длина списка определена как раз, просто ничего не печатать, но это приводит к ошибке.Я могу догадаться, что есть проблема, связанная с промежуточным программным обеспечением (я использую избыточное обещание).Как вы можете видеть, я добавил промежуточное программное обеспечение в определение приложения, я не вижу, в чем оно отсутствует. Есть идеи?Вот мой код:

actions / index.js: 

import axios from 'axios';

export const FETCH_TESTS = 'FETCH_TESTS';
const ROOT_URL = 'http://some-working-api-entry.com';

export function fetchTests(){
  const request = axios.get(`${ROOT_URL}/tests/?format=json`);
  return {
    type: FETCH_TESTS,
    payload: request
  }
}

redurs / reducer_tests.js 

import { FETCH_TESTS } from '../actions/index';

export default function(state = [], action){
  switch (action.type) {
    case FETCH_TESTS:
      return [action.payload.data, ...state]; //ES6 syntaxis\   

 }
 return state;
}

actions / index.js 

import { combineReducers } from 'redux';
import TestsReducer from './reducer_tests';

const rootReducer = combineReducers({
  tests: TestsReducer
});

export default rootReducer;

container / list_tests.js 

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchTests } from '../actions';

class TestList extends Component{

    componentDidMount(){
        this.props.fetchTests();
    }

    renderTest(){
      return _.map(this.props.tests, test => {
        return (
          <tr key={test.id}>
            <td>{test.id}</td>
            <td>{test.col1}</td>
            <td>{test.col2}</td>
            <td>{test.col3}</td>
            <td>{test.col4}</td>
        </tr>
        );
      });
  }

  render(){
    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
          </tr>
        </thead>
        <tbody>
          { this.renderTest() }
        </tbody>
      </table>
    );
  }
}

function mapStateToProps(state){
    return {tests: state.tests}
  }
//export default connect(mapStateToProps)(TestList)
export default connect(mapStateToProps, { fetchTests})(TestList);

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';

import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
      <App />
    </Provider>
    , document.getElementById('root'));

package.json 

{
  "name": "someapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.5.3",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

РЕДАКТИРОВАТЬ: от создателя действия (массив содержит единственный объект в точке входа в список API): 

config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
​
data: Array [ {…} ]
​
headers: Object { "content-type": "application/json" }
​
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }

status: 200 statusText: "OK" proto : Object {…}

из редуктора: 

payload:[object Object]

Если я регистрирую тестовые реквизиты на контейнере, сначала он записывает пустой массив [], затем он записывает массив длины 1

Ответы [ 2 ]

0 голосов
/ 12 мая 2018 
const request = axios.get(`${ROOT_URL}/tests/?format=json`);
 // here is your issue because axios returns promise.

Создайте метод doGet, подобный этому. 

export function doGet(url, onSuccess, onFailure) {

        return axios.get(url)
            .then((response) => {
                if (onSuccess) {
                    onSuccess(response);
                }

                return response.data || {};
            })
            .catch((error) => {
                if (onFailure) {
                    onFailure(error);
                }
            });
    }

И вызовите этот метод на вашем componentDidMount как: 

doGet(
   'your/api/url',
   (response) => console.log('Api success callback', response),
   (error) => console.log('error callback', error)
)
0 голосов
/ 12 мая 2018

Вы должны вызвать диспетчер, чтобы обновить магазин.

В containers/list_tests.js

const mapDispatchToProp = dispatch => ({
      fetchTests : () => dispatch(fetchTests())
})

export default connect(mapStateToProps, mapDispatchToProp )(TestList);

РЕДАКТ. 1: Найдена другая проблема. 

export function fetchTests(){
  return axios.get(`${ROOT_URL}/tests/?format=json`)
       .then(res => {
             return {
                type: FETCH_TESTS,
                 payload: res.data
              }
        });

}
...