Действия, выполняемые из mediaSagas. js не входит в функцию редуктора и, следовательно, не сохраняется состояние / состояние редуктора. Я попытался отладить, но не смог найти root причину.
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 });
}
}
наблюдателей. 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);
}
редукторы / индекс. js
import { combineReducers } from 'redux';
import images from './imageReducer';
import videos from './videoReducer';
const rootReducer = combineReducers({
images,
videos
});
export default rootReducer;
саг / индекс. 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')
);