Question

我有一个带有2个减速器（城市和医生）的应用我用萨加斯。我有一个奇怪的状态覆盖问题。

例如，这是提取医生操作的开始。如您所见，医生isLoading: false的状态已更改为isLoading: true

在那次获取城市行动开始之前。并且医生的isLoading已更改为false。

在每次动作分派上，都会复位另一个减速器状态。

我怀疑这是特定于NextJS的问题，因此根存储会创建两次并导致竞争状态。

技术：react，redux，react-redux，next-redux-wrapper，next-redux-saga，redux-saga

app.js

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

store.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
})

city / reducer.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
  }
}

city / actions.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
  }
}

city / saga.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())
  }
}

（！）对于医生的reduce / saga / actions，其结构与名称相同。

Page.js是每个页面的主要布局。 基本上将每个页面的内容包装在_document.js

中

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

/ ptor页面使用的

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)

出现问题的地方可能是什么？答案需要什么代码部分？谢谢

Answer 1

我很确定您的归约器在返回state时会覆盖您当前的initialState。请参见此answer on GitHub。

next-redux-saga中没有已知的竞争状况或与多个根存储或化简有关的其他问题。

React，Redux，NextJS怪异的状态竞赛覆盖

1 个答案: