Отвечайте на одно действие Redux в нескольких редукторах redux

Я использую несколько редукторов в своем проекте, а затем комбинирую их с функцией combReducers (), и все действия хранятся в одном файле. когда я отправляю действие, оно возвращает мне значения состояния undefined. Я думаю, что это невозможно узнать из-за нескольких редукторов. Но когда я использую один файл-редуктор. Работает нормально. Кто-нибудь может сказать мне, в чем проблема. Это то, как я комбинирую редукторы.

const rootReducer = combineReducers({
  isMobileReducer,
  imageSliderReducer
})

и теперь переходим в магазин, как показано ниже:

let store = createStore(rootReducer,applyMiddleware(thunk))

и во внешнем интерфейсе, как я получаю доступ к состоянию

const mapStateToProps = (state) => ({
 images: state.images,
 isMobile: state && state.isMobile
})

imageSliderReducer.js

import {
 FETCH_IMAGES_BEGIN,
 FETCH_IMAGES_SUCCESS,
 FETCH_IMAGES_FAILURE
} from '../actions/actionTypes'

const initialState = {
 images:[],
 error:null
}

const imageSliderReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_IMAGES_BEGIN:
      return {...state,error:null}
    case FETCH_IMAGES_SUCCESS:
      return {...state,images:action.payload.images}
    case FETCH_IMAGES_FAILURE:
      return {...state,error:action.payload.error,images:[]}
    default:
      return state
  }
}
export default imageSliderReducer;

isMobileReducer.js

import {
 OPEN_MENU,
 CLOSE_MENU,
 SET_DEVICE_TYPE,
} from '../actions/actionTypes'

const initialState = {
 isMenuOpen: null,
 isMobile: false
}

const isMobileReducer = (state = initialState, action) => {
  switch (action.type) {
   case OPEN_MENU:
    return {...state, isMenuOpen: true}
   case CLOSE_MENU:
    return {...state, isMenuOpen: false}
   case SET_DEVICE_TYPE: 
    return {...state, isMobile: action.isMobile}
   default:
    return state
  }
}

export default isMobileReducer;

actionCreator.js

import { 
 OPEN_MENU,
 CLOSE_MENU,
 SET_DEVICE_TYPE,
 FETCH_IMAGES_BEGIN,
 FETCH_IMAGES_SUCCESS,
 FETCH_IMAGES_FAILURE
} from './actionTypes'

export function openMenu(isMobile) {
 return {
  type: OPEN_MENU
 }
}

export function closeMenu(isMobile) {
 return {
  type: CLOSE_MENU
 }
}

export function setDeviceType (isMobile) {
 return {
  type: SET_DEVICE_TYPE,
  isMobile: isMobile
 }
}

 export function fetchImages() {
 return dispatch => {
  dispatch(fetchImagesBegin());
   return fetch("https://7344.rio.com/wp-json/customapi/homeslider")
  .then(handleErrors)
  .then(res => res.json())
  .then(json => {
    dispatch(fetchImagesSuccess(json.posts));
    return json.posts;
  })
  .catch(error => dispatch(fetchImagesFailure(error)));
};
}


function handleErrors(response) {
 if (!response.ok) {
   throw Error(response.statusText);
 }
 return response;
}

export const fetchImagesBegin = () => ({
 type: FETCH_IMAGES_BEGIN
});

export const fetchImagesSuccess = images => ({
 type: FETCH_IMAGES_SUCCESS,
 payload: { images }
});

export const fetchImagesFailure = error => ({
 type: FETCH_IMAGES_FAILURE,
 payload: { error }
});

Можете ли вы поделиться своими редюсерами и действиями?

Pranay Tripathi 13.11.2018 11:12

я отредактировал код.

user10298495 13.11.2018 11:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
2
453
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте использовать это:

    const mapStateToProps = (state) => ({
  images: state.imageSliderReducer.images,
  isMobile: state.isMobileReducer.isMobile
 })

в любое время .. @Rajat

Ashish Kirodian 13.11.2018 11:46

не могли бы вы помочь еще с одним запросом в redux?

user10298495 13.11.2018 14:16

@Rajat Да, конечно

Ashish Kirodian 13.11.2018 14:28

Я использую три класса в одном компоненте и выполняю действия. Но я получаю сообщение об ошибке. "this.props.dispatch не является функцией", как я использовал "экспорт подключения по умолчанию (mapStateToProps, mapDispatchToProps) (Работа);"

user10298495 13.11.2018 14:32

Другие вопросы по теме