导航时重置 Redux 存储（在我重构 reducer 之后）

Question

我正在尝试将我的减速器重构为两个 "sub" 减速器，并在导出到 store.js 之前将它们组合起来。但是，当我在我的应用程序中导航时，我的 notificationReducer 的状态被重置，而不是其他减速器。我不确定可能是什么问题，我已经按照 redux.js.org => 中的指南（某种程度上）进行操作 Separating Data Handling by Domain

关于您如何重构 reducer 有什么想法或提示吗？

notificationReducer.js

import {
  FETCHING_NOTIFICATION_STATUS, // NOTIFICATION
  FETCHING_NOTIFICATION_STATUS_SUCCESS,
  FETCHING_NOTIFICATION_STATUS_FAILURE,
  FETCHING_NOTIFICATION_DATA, // NOTIFICATION
  FETCHING_NOTIFICATION_DATA_SUCCESS,
  FETCHING_NOTIFICATION_DATA_FAILURE,
  FETCHING_MARK_NOTIFICATION_AS_UNSEEN, // NOTIFICATION
  FETCHING_MARK_NOTIFICATION_AS_UNSEEN_SUCCESS,
  FETCHING_MARK_NOTIFICATION_AS_UNSEEN_FAILURE
} from '../Actions/actionTypes'

const fetchingData = {
  isFetching: false,
  dataFetched: false,
  error: false,
  errorMsg: '',
}

const initialState = {
  notificationStatus: {
    ...fetchingData,
    hasNotifications: false,
  },
  notificationData: {
    ...fetchingData,
    data: [],
  }, 
  markNotification: {
    ...fetchingData,
    isUnseen: false,
  }, 
}

const { notificationStatus, notificationData, markNotification } = initialState

const notificationStatusReducer = (state = notificationStatus, action) => {
  switch(action.type) {
    case FETCHING_NOTIFICATION_STATUS:
      return {
        ...state,
        isFetching: true,
      }
    case FETCHING_NOTIFICATION_STATUS_SUCCESS:
      return {
        ...state,
        isFetching: false,
        dataFetched: true,
        hasNotifications: action.data,
      }
    case FETCHING_NOTIFICATION_STATUS_FAILURE:
      return {
        ...state,
        isFetching: false,
        error: true,
        errorMsg: action.errorMsg,
      }

    default:
      return state
  }
}

const notificationDataReducer = (state = notificationData, action) => {
  switch(action.type) {
    case FETCHING_NOTIFICATION_DATA:
      return {
        ...state,
        isFetching: true
      }
    case FETCHING_NOTIFICATION_DATA_SUCCESS:
      return {
        ...state,
        isFetching: false,
        dataFetched: true,
        data: action.data,
      }
    case FETCHING_NOTIFICATION_DATA_FAILURE:
      return {
        ...state,
        isFetching: false,
        error: true,
        errorMsg: action.errorMsg,
      }

    default:
      return state
  }
}

const markNotificationReducer = (state = markNotification, action) => {
  switch(action.type) {
    case FETCHING_MARK_NOTIFICATION_AS_UNSEEN:
      return {
        ...state,
        isFetching: true
      }
    case FETCHING_MARK_NOTIFICATION_AS_UNSEEN_SUCCESS:
      return {
        ...state,
        isFetching: false,
        dataFetched: true,
        isUnseen: true,
      }
    case FETCHING_MARK_NOTIFICATION_AS_UNSEEN_FAILURE:
      return {
        ...state,
        isFetching: false,
        error: true,
        errorMsg: action.errorMsg,
      }

    default:
      return state
  }
}

const notificationReducer = (state = initialState, action) => {
  return {
      notificationStatusReducer : notificationStatusReducer(state.notificationStatus, action),
      notificationDataReducer : notificationDataReducer(state.notificationStatus, action),
      markNotificationReducer : markNotificationReducer(state.markNotification, action),
  }
}

export default notificationReducer

Answer 1

你应该使用 combineReducers 来处理这些事情。所以你的 notificationReducer 应该是你的三个减速器的组合。

const notificationReducer = combineReducers({
  notificationStatusReducer,
  notificationDataReducer,
  markNotificationReducer 
})

希望对您有所帮助

导航时重置 Redux 存储（在我重构 reducer 之后）

Redux store reset when navigating (after I've refactored reducer)

refactoring

state

reducers

redux

react-navigation