Question

嘿，我已经试图解决这个问题好几天了。我希望在reducer中有两条信息，一条id和json，但是到目前为止我所尝试的东西似乎都没有用，对此的任何帮助都将非常感激。

这是使用redux-multi的根index.js文件：

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'));

这是动作文件（动作文件夹 - ＆gt; index.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; 
    }
}

Answer 1

Axios函数返回承诺，而不是同步值。查看用法示例here。基本上，要访问您需要编写的响应

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
        });
      });
  };
}

当多个有效负载时，react / redux action creator返回undefined

1 个答案: