如何从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;
  }
};

我合并reducers的文件；

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 中 dispatch action。 您将在动作创建者中分派动作。

如果调度PHOTO_SAVE_ERROR的动作是

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

然后您需要通过 thunk 调度另一个动作，该动作将调度这两个动作。

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