从 redux-thunk 获取租金时未定义租金？

Question

不确定为什么 redux-thunk 不能正常工作它说在我们正确导入和导出时租金是未定义的。

如果我在没有调度的情况下进行正常呼叫，它确实可以正常工作，没有任何问题。是 redux-thunk 导致问题吗？

请同指指导

Reducer.js

 export const houseReducer = (state = [], action) => {
      switch (action.type) {
        case FETCH_HOUSE_SUCCESS:
          return { ...state, data: action.rentals };
        default:
          return state;
      }
    };

组件

import * as action from "../actions";
    function House({ props }) {
      const dispatch = useDispatch();
    
      useEffect(() => {
        const { rentals } = dispatch(action.getHouseSuccess()); //undefined
      }, []);
    
    function mapStateToProps(state) {
      return {
        rentals: state.rentals,
      };
    }
    
    export default connect(mapStateToProps)(House);

动作

export const getHouseSuccess = () => {
  return function (dispatch) {
    setTimeout(() => {
      dispatch({
        type: FETCH_HOUSE_SUCCESS,
        rentals,
      });
    }, 1000);
  };
};

以下语句工作正常 setTimeout 导致问题？它在渲染之前调用？

export const getHouseSuccess = () => {
  return {
    type: FETCH_HOUSE_SUCCESS,
    rentals,
  };
};

Answer 1

我不知道你是怎么设置你的 redux 的。

我通常是这样设置它们的：-

一个。减速机

/slices/house.js

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  rentals: []
}

export const houseSlice = createSlice({
  name: 'house',
  initialState,
  // // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
    setHouseSuccess: (state, action) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.rentals = action.payload
    }
  }
})

export const { getHouseSuccess } = houseSlice.actions;

// The function below is called a selector and allows us to select a value from
// the state. Selectors can also be defined inline where they're used instead of
// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
export const selectRentals = (state) => state.house.rentals

export default houseSlice.reducer;

乙。店铺

store.js

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import houseReducer from '../slices/house'

export const store = configureStore({
  reducer: {
    house: houseReducer
  },
  middleware: getDefaultMiddleware({
    serializableCheck: false
  })
})

C。应用组件

import { Provider } from 'react-redux'
import { store } from '../app/store'

export default function App() {
  return {
    <>
      <Provider store={store}>
        {/* your content... */}    
      </Provider>
    </>
  }
}

D.组件（你使用 redux 的地方）

import { useContext, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { selectRentals, setHouseSuccess } from '../slices/house'

export default function House(props) {
  const dispatch = useDispatch()
  const rentals = useSelector(selectRentals)  

  useEffect(() => {
    if(props?.rental) {
      dispatch(setHouseSuccess(props?.rental))
    }
  }, [props?.rental])

  function handleConsoleLogging(data) {
    console.log(data)
  }

  return {
    <>
      {rentals?.length > 0 && handleConsoleLogging(rentals)}
    </>
  }
}

Answer 2

我认为商店数据应该可以通过 rantals 而不是 props 访问

function House({ rentals }) {
  const dispatch = useDispatch();

  useEffect(() => {
    if (rentals) {
      dispatch(action.getHouseSuccess(rentals));
    }
  }, []);

试试这个应该有用

从 redux-thunk 获取租金时未定义租金？

rental is undefined while fetching it from redux-thunk?

reactjs

react-redux

一个。减速机

乙。店铺

C。应用组件

D.组件（你使用 redux 的地方）