React, Redux, Next JS Странные переопределения расы штата - PullRequest
0 голосов
/ 11 февраля 2020

У меня есть приложение с 2 редукторами (город и доктор), я использую саги. У меня проблема в том, что со странными переопределениями состояний.

Например, вот начало действий врачей по поиску. Как видите, состояние доктора изменилось для isLoading: false на isLoading: true enter image description here

. И isLoading для врачей был изменен на false. enter image description here

При каждой отправке действия сбрасывается состояние другого редуктора.

enter image description here enter image description here

Я сомневаюсь, что это следующая JS специфика c проблема, поэтому root магазин создает пару раз и вызывает состояние гонки.

Технологии: реагировать, сокращать, реагировать редукс, следующий-редукс-обертка, следующий-редукс-сага, редукс-сага

приложение. js

....
export default withRedux(createStore)(withReduxSaga(MyApp))

магазин. js

import { applyMiddleware, createStore } from 'redux'
import createSagaMiddleware from 'redux-saga'

import rootReducer from './rootReducer'
import rootSaga from './rootSaga'


const bindMiddleware = middleware => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension')
    return composeWithDevTools(applyMiddleware(...middleware))
  }
  return applyMiddleware(...middleware)
}


function configureStore(initial={}) {
  const sagaMiddleware = createSagaMiddleware()
  const store = createStore(
    rootReducer,
    initial,
    bindMiddleware([sagaMiddleware])
  )

  store.sagaTask = sagaMiddleware.run(rootSaga)

  return store
}

export default configureStore

rootReducer. js

import { combineReducers } from 'redux'
import { cityReducer } from "./reducers/city"
import { doctorReducer } from "./reducers/doctor"

export default combineReducers({
  city: cityReducer,
  doctor: doctorReducer
})

город / редуктор. js

import {actionTypes} from "../../actions/city"

const initialState = {
  cities: []
}

export const cityReducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.FETCH_CITIES:
      return initialState
    case actionTypes.FETCH_CITIES_SUCCESS:
      return {
        cities: action.data
      }
    case actionTypes.FETCH_CITIES_FAILURE:
      return initialState
    default:
      return initialState
  }
}

город / действия. js

export const actionTypes = {
  FETCH_CITIES: 'FETCH_CITIES',
  FETCH_CITIES_SUCCESS: 'FETCH_CITIES_SUCCESS',
  FETCH_CITIES_FAILURE: 'FETCH_CITIES_FAILURE',
}

export const fetchCities = () => {
  return {
    type: actionTypes.FETCH_CITIES
  }
}
export const fetchCitiesSuccess = (data) => {
  return {
    type: actionTypes.FETCH_CITIES_SUCCESS,
    data
  }
}
export const fetchCitiesFailure = () => {
  return {
    type: actionTypes.FETCH_CITIES_FAILURE
  }
}

город / сага . js

import {call, put, takeLatest} from "redux-saga/effects"
import {actionTypes, fetchCitiesFailure, fetchCitiesSuccess} from "../../actions/city"
import {getCities} from "../../api"


export function* watchFetchCitiesRequest() {
  yield takeLatest(actionTypes.FETCH_CITIES, workerFetchCitiesRequest)
}

function* workerFetchCitiesRequest() {
  try {
    const {data} = yield call(getCities)

    yield put(fetchCitiesSuccess(data.results))
  } catch (e) {
    yield put(fetchCitiesFailure())
  }
}

(!) Для врачей редуктор / сага / действия структура та же, кроме имен.

Стр. js is основной макет для каждой страницы. В основном содержимое каждой страницы упаковывается в _document.js

const Page = ({dispatch}) => {
  useEffect(() => {
    dispatch(fetchCities())
  }, [])
} 
const mapStateToProps = ({city}) => ({cities: city.cities})
export default connect(mapStateToProps)(Page)

DoctorList. js Компонент, который / страница доктора потребляет

import {useEffect} from "react"
import {fetchDoctors} from "../../actions/doctor"
import {getCity} from "../../utils/functions"
import {DoctorItemPreview} from "./DoctorItem"

const DoctorList = ({dispatch, isLoading, isError, response}) => {

  useEffect(() => {
    getCity() ? dispatch(fetchDoctors()) : null
  },[getCity()])
  return <>
    {!isLoading ? <>

    </> : <>
      {[...Array(10)].map((e, i) => <span key={i}>
        <DoctorItemPreview/>
      </span>)}
    </>}
  </>
}

const mapStateToProps = ({doctor, city}) => ({
  isLoading: doctor.isLoading,
  isError: doctor.isError,
  response: doctor.response,
})
export default connect(mapStateToProps)(DoctorList)

Что может быть местом, где проблема появляется? Какие части кода вам нужны для ответа? Спасибо

1 Ответ

2 голосов
/ 13 февраля 2020

Я почти уверен, что ваши редукторы перезапишут ваш текущий state при возврате initialState. См. Этот ответ на GitHub .

Нет известных условий гонки или других проблем, связанных с несколькими root магазинами или редукторами в next-redux-saga.

...