Question

从mediaSagas.js触发的操作未进入减速器功能，因此减速器存储/状态未更新。我已经尝试调试，但找不到根本原因。

actionTypes.js

export const FLICKR_IMAGES_SUCCESS = 'FLICKR_IMAGES_SUCCESS';
export const SHUTTER_VIDEOS_SUCCESS = 'SHUTTER_VIDEOS_SUCCESS';

imageReducer.js

import initialState from './initialState';
import * as types from '../constants/actionTypes';

export default function (state = initialState.images, action) {
  console.log("action",action); // I am not getting action with type FLICKR_IMAGES_SUCCESS or SHUTTER_VIDEOS_SUCCESS
  switch (action.type) {
    case types.FLICKR_IMAGES_SUCCESS:
      return [...state, action.images];
    default:
      return state;
  }
}

videoReducer.js

import initialState from './initialState';
import * as types from '../constants/actionTypes';

export default function (state = initialState.videos, action) {
  console.log("action",action); // I am not getting action with type FLICKR_IMAGES_SUCCESS or SHUTTER_VIDEOS_SUCCESS
  switch (action.type) {
    case types.SHUTTER_VIDEOS_SUCCESS:
      return [...state, action.videos];
    default:
      return state;
  }
}

initialState.js

export default {
  images: [],
  videos: []
};

mediaSagas.js

import { put, call } from 'redux-saga/effects';
import { unsplashImages, shutterStockVideos } from '../Api/api';
import * as types from '../constants/actionTypes';


export default function* searchMediaSaga({ payload }) {
  console.log("saga entered");
  try {
    const videos = yield call(shutterStockVideos, payload);
    const images = yield call(unsplashImages, payload);
    console.log("vids",videos); // I am getting the videos data here
    console.log("img",images); // I am getting the image data here
    yield [
      put({ type: types.SHUTTER_VIDEOS_SUCCESS, videos }),
      put({ type: types.FLICKR_IMAGES_SUCCESS,images}),
    ];
  } catch (error) {
    console.log("err",error);
    yield put({ type: 'SEARCH_MEDIA_FAILURE', error });
  }
}

watchers.js

import { takeLatest } from 'redux-saga/effects';
import  searchMediaSaga  from './mediaSagas';
import * as types from '../constants/actionTypes';

// Watches for SEARCH_MEDIA_REQUEST action type asynchronously
export default function* watchSearchMedia() {
  yield takeLatest(types.SEARCH_MEDIA_REQUEST, searchMediaSaga);
}

reducers / index.js

import { combineReducers } from 'redux';
import images from './imageReducer';
import videos from './videoReducer';

const rootReducer = combineReducers({
  images, 
  videos
});

export default rootReducer;

sagas / index.js

import { fork } from 'redux-saga/effects';
import watchSearchMedia from './watchers';

export default function* startForman() {
  yield fork(watchSearchMedia);
}

configureStore.js

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers/index';
import rootSaga from '../sagas'; // TODO: Next step

const configureStore = () => {
  const sagaMiddleware = createSagaMiddleware(); 
  return {
    ...createStore(rootReducer,
      applyMiddleware(sagaMiddleware)),
    runSaga: sagaMiddleware.run(rootSaga)
  };
};

export default configureStore;

src / index.js

import ReactDOM from 'react-dom';
import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import App from './containers/App'
import MediaGalleryPage from './containers/MediaGalleryPage'

const store = configureStore();
store.subscribe(() => {
  const newState = store.getState();
  // check out your updated state
  console.log("NewState", newState) // always giving empty image and video arrays
});

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>  
        <Route exact path="/" component={App} />
        <Route path="/library" component={MediaGalleryPage} />
      </Switch>
    </Router>
  </Provider>, document.getElementById('root')
);

Answer 1

我发现了问题，在mediaSagas.js中，我并行使用put效果，但是现在不赞成使用。检查所有（[... effects]）-redux saga文档中的并行效果解决了我的问题。

我上面使用的不赞成使用的方式-

yield [
      put({ type: types.SHUTTER_VIDEOS_SUCCESS, videos }),
      put({ type: types.FLICKR_IMAGES_SUCCESS,images}),
    ];

解决了我的问题的新方法（正确的方法）

yield all([
      put({ type: types.SHUTTER_VIDEOS_SUCCESS, videos }),
      put({ type: types.FLICKR_IMAGES_SUCCESS,images })
    ]);

Github链接将我引向了解决方案- https://github.com/redux-saga/redux-saga/issues/459

减速器未在触发操作时更新状态，因此Redux存储/状态未更新

1 个答案: