如何从reducer react-redux分派一个动作

Question

我在我的一个reducer中使用了一个事件侦听器，我需要根据传入的'类型'触发一个操作。我可以监听事件，我可以看到有效负载，但我不能调度另一个动作。我唯一需要做的就是调度一个动作。我该怎么做呢?我不能从减速器调度。我用的是redux-thunk。我试图使用它与中间件，但我不能成功。谢谢你。

import { ADD_NOTIF, REMOVE_NOTIF, CLOSE_NOTIFS } from './actions';
import Notifications from "../util/Notifications";
import { addNotif } from "./actions"
const localStatus = JSON.parse(localStorage.getItem("notifStatus"));
const initialState = { notif: [], notifStatus: localStatus !== null ? localStatus : true }
const NotifReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_NOTIF:
return {
...state,
notif: action.payload,
};
case REMOVE_NOTIF:
return {
...state,
notif: state.notif.filter(i => i.id !== action.payload.id)
};
case CLOSE_NOTIFS:
localStorage.setItem("notifStatus", JSON.stringify(action.payload.status));
return {
...state,
notifStatus: action.payload.status,
};
case 'TWITTER_NET_TWEET':
return {
...state,
notifStatus: action.payload.tweet
}
case 'PHOTO_SAVE_ERROR':
// Here i have to dispatch addNotif
return {
...state,
}
default:
return state;
}
};

文件i组合减速机;

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import appReducer from 'containers/Main/reducer';
import notifReducer from '../src/redux/notifreducer';
import GalleryReducer from '../src/redux/Gallery/gallery-reducer';
import PlaneModeReducer from '../src/redux/planeModereducer';
import ContactsReducer from '../src/redux/Contacts/contactsReducer';
import CallReducer from '../src/redux/CallModule/callReducer';
import BackgroundReducer from '../src/redux/Background/background-reducer';
import SoundsReducer from '../src/redux/Sounds/soundsReducer';
import TwitterReducer from '../src/redux/Twitter/twitter-reducer';
import SahibindenReducer from '../src/redux/Sahibinden/sahibinden-reducer';
import BadgeReducer from '../src/redux/BadgeNotifications/badgeReducer';
import NewsReducer from "../src/redux/News/newsReducer";
import NotesReducer from "../src/redux/Notes/notesReducer";
import MessagesReducer from "../src/redux/Messages/messagesReducer";
const reducers = combineReducers({
app: appReducer,
notif: notifReducer,
gallery: GalleryReducer,
planeMode: PlaneModeReducer,
contacts: ContactsReducer,
inCall: CallReducer,
background: BackgroundReducer,
sounds: SoundsReducer,
twitter: TwitterReducer,
sahibinden: SahibindenReducer,
openedApp: BadgeReducer,
news: NewsReducer,
messages: MessagesReducer,
notes: NotesReducer
});
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducers,
composeEnhancers(applyMiddleware(thunk))
);
export default store;

Answer 1

如果您正在使用redux-thunk，那么您不需要在reducer中调度操作。您可以在动作创建器中分派动作。

如果调度PHOTO_SAVE_ERROR的动作是

function add_photo_error()
{
return {type:"PHOTO_SAVE_ERROR"}
}

那么你需要调度另一个动作，这个动作将调度两个动作。

function add_photo_error_and_notification()
{
return (dispatch)=>{
//dispatch the original action
dispatch(add_photo_error());
//dispatch your notification action
dispatch(addNotif());
}
}

编辑:

如果您只是想根据PHOTO_SAVE_ERROR改变reducer中的状态，您可以这样做

const NotifReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_NOTIF:
return {
...state,
notif: action.payload,
};
case REMOVE_NOTIF:
return {
...state,
notif: state.notif.filter(i => i.id !== action.payload.id)
};
case CLOSE_NOTIFS:
localStorage.setItem("notifStatus", JSON.stringify(action.payload.status));
return {
...state,
notifStatus: action.payload.status,
};
case 'TWITTER_NET_TWEET':
return {
...state,
notifStatus: action.payload.tweet
}
case 'PHOTO_SAVE_ERROR':
// Notice that this is the same mutation as the ADD_NOTIF action
return {
...state,
notif: "PHOTO SAVE ERROR",// replace this with whatever is available in the action object. 
};
default:
return state;
}
};