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

Question

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

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

请指导相同

减速器.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的。

这就是我通常设置它们的方式：-

A.减速机

• /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;

B. 商店

• 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));
    }
  }, []);

试试这个它应该工作