react / redux action creator возвращает неопределенное значение, когда больше одной полезной нагрузки

Эй, я уже несколько дней пытаюсь это выяснить. Я хочу иметь в редукторе две части информации, идентификатор и json, который получает, однако то, что я пытался до сих пор, кажется, не работает, любая помощь в этом была бы очень признательна.



Это корневой индекс.js файл, который использует redux-multi: 



import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import { createStore, applyMiddleware } from 'redux';

import { BrowserRouter, Route, Switch } from 'react-router-dom';

import promise from 'redux-promise';

import multi from 'redux-multi'



import reducers from './reducers';

import PhotosIndex from './components/photos_index';

import PhotosNew from './components/photos_new';

import PhotosShow from './components/photos_show';



const createStoreWithMiddleware = applyMiddleware(promise, multi)(createStore);



ReactDOM.render(

    <Provider store={createStoreWithMiddleware(reducers)}>

        <BrowserRouter>

            <div>

                <Switch>

                    <Route path="/photos/new" component={PhotosNew} />

                    <Route path="/photos/:id" component={PhotosShow} />

                    <Route path="/" component={PhotosIndex} />

                </Switch>

            </div>

        </BrowserRouter>

    </Provider>

    , document.querySelector('.container'));


Это файл действий (папка действий - > индекс.js) 



import axios from 'axios';



export const FETCH_PHOTOS = 'fetch_photos';

export const DELETE_PHOTO = 'delete_photo';



const ROOT_URL = 'https://jsonplaceholder.typicode.com'



export function fetchPhotos(){

    const request = axios.get(`${ROOT_URL}/photos`);



    return {

        type: FETCH_PHOTOS,

        payload: request

    };

}



export function deletePhoto(id){



    const request = axios.get(`${ROOT_URL}/photos`);



    const alldata = [id, request];



    return {

        type: DELETE_PHOTO,

        //payload is undefined

        payload: alldata

    }



    //also tried 

    //return {

    //  type: DELETE_PHOTO,

    //  id: id, - id is as expected

    //  payload: request - payload is undefined

    //}



    //also tried 

    //return {

    //  type: DELETE_PHOTO,

    //  id: id, - id is as expected

    //  payload: 'random string or any object' - payload is as expected

    //}

}


Это редуктор: 



import _ from 'lodash';

import { FETCH_PHOTOS } from '../actions';

import { DELETE_PHOTO } from '../actions';



export default function(state = {}, action){

    switch(action.type){

        case FETCH_PHOTOS:

            const first20 = action.payload.data.slice(0, 20);

            console.log(first20);

            return _.mapKeys(first20, 'id');



        case DELETE_PHOTO:





            //need to get two payloads into here, list of json elements and the id





            //const first20_new = action.payload[1].data.slice(0, 20);

            console.log(action.payload[1](data));

            //console.log('first20 ' + first20_new);

            console.log('data is: ' + action.payload[0]);

            console.log('delete photo' + action.payload[1]);



            // console.log('id is: ' + action.payload.data);



            const findItemFromData = action.payload[1].indexOf(action.payload[0]);

            console.log(findItemFromData);

            // const removeItemFromData = action.payload.request.splice(findItemFromData, 1);

            // return _.mapKeys(removeItemFromData, action.payload[0]);

        default:

            return state; 

    }

}
654   1  

1 ответ:

Функции Axios возвращаютобещание , а не синхронное значение. Проверьте примеры использования здесь . В принципе, чтобы получить доступ к ответу, вам нужно написать 

axios.get(`${ROOT_URL}/photos`)
  .then(response => {
    // do something with the response in here
  });

Проблема с вашими создателями действий в том, что они синхронно создают объект действия, в то время как у вас еще нет данных, необходимых для создания действия. Перед созданием действия и его отправкой необходимо дождаться ответа API. Вам нужно будет использовать что-то вроде redux-thunk, redux-api-middleware, или redux-saga для обработки этих типов асинхронно созданных действий (или свернуть свой собственный вкус).

Если вы используете redux-thunk, например, создатель действия вернет функцию, которой передается функция dispatch, которую он может использовать для отправки действия внутри успешного обратного вызова вашего вызова API.

function fetchPhotos() {
  return (dispatch, getState) => {
    // perform API call
    axios.get(`${ROOT_URL}/photos`)
      .then(response => {
        // now that you have the response, you can dispatch the action
        dispatch({
          type: FETCH_PHOTOS,
          payload: response
        });
      });
  };
}
1  
2017-09-03 07:23:17

Comments

    Ничего не найдено.
Click here to cancel reply.