useEffect not triggered

Question

我正试图使用redux和useEffect来更新/获取redux状态，但useEffect完全没有运行，但我不知道发生了什么；嗨">

import { useSelector, useDispatch } from 'react-redux';
import { setDisplayLogsheet, getLogsheets } from '../redux/actions';   
...
const { displayLogsheet, logsheets } = useSelector(state => state.logsheetReducer);
const dispatch = useDispatch();

useEffect(() => {
console.log("hi")
dispatch(getLogsheets());
dispatch(setDisplayLogsheet(logsheets));
}, []);

请帮忙吗？感谢

---

UPDATE：这里有更多的代码来理解

App.js:

我已经在提供商中添加了商店

const Stack = createStackNavigator();
export default function App() {
return(
<Provider store={Store}>
<NavigationContainer>
...
<Provider />
}

home.js:

尝试使用Selector获取日志表并显示日志表和useEffect进行调度，但useEffect完全没有运行

export default function Home({navigation})  {

const { displayLogsheet, logsheets } = useSelector(state => state.logsheetReducer);
const dispatch = useDispatch();

useEffect(() => {
console.log('getting logsheets...')
dispatch(getLogsheets())
}, [dispatch])

useEffect(() => {
console.log('setting displayLogsheet...')
if(logsheets){ 
dispatch(setDisplayLogsheet(logsheets))
}
}, [dispatch, logsheets])


console.log(logsheets)
console.log(displayLogsheet)
return (
<>
<SafeAreaView>
<ScrollView>
<HomeTopStack logsheet={displayLogsheets} iterateDocket={iterateDocket} />
<ScanBarcodeButton navigation={navigation} />
{displayLogsheets.data.DO.map(logsheet => (
<TouchableOpacity onPress={() => navigation.navigate('Details', logsheet)}>
<DOCards logsheet={displayLogsheets} />
</TouchableOpacity>
))}
</ScrollView>
</SafeAreaView>
</>
)
}

store.js:

import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logsheetReducer from './reducers';

const rootReducer = combineReducers({ logsheetReducer });

export const Store = createStore(rootReducer, applyMiddleware(thunk));

reducer.js:

这是设置显示日志表以及获取伪日志表数据的reducer

import { SET_DISPLAY_LOGSHEET, GET_LOGSHEETS } from "./actions";

const initialState = {
logsheets: {},
displayLogsheet: {},
}

function logsheetReducer(state = initialState, action) {
switch (action.type) {
case SET_DISPLAY_LOGSHEET:
console.log("inside logsheetReducer, SET_DISPLAY_LOGSHEET")
return { ...state, displayLogsheet: action.payload };
case GET_LOGSHEETS:
console.log("inside logsheetReducer, GET_LOGSHEET")
return { ...state, logsheets: action.payload };
default:
return state;
}
}

export default logsheetReducer;

actions.js:

import CreateFakeLogsheets from "../data/logsheet";

export const SET_DISPLAY_LOGSHEET = 'SET_DISPLAY_LOGSHEET';
export const GET_LOGSHEETS = 'GET_LOGSHEETS';

const logsheets = CreateFakeLogsheets(2,3)

export const getLogsheets = () => {
console.log("inside getLogsheets")
try {
return dispatch => {
dispatch({
type: GET_LOGSHEETS,
payload: logsheets
})
}
} catch (error) {
console.log(error)
}
}

export const setDisplayLogsheet = displayLogsheet => {
console.log("inside setDisplayLogsheets")

return dispatch => {
dispatch({
type: SET_DISPLAY_LOGSHEET,
payload: displayLogsheet
});
}
};

这里是redux的大部分代码，还有useEffect。请帮忙

Answer 1

在不知道其余代码的结构的情况下，我会将效果一分为二，如下所示：

useEffect(() => {
console.log('getting logsheets...')
dispatch(getLogsheets())
}, [dispatch])
useEffect(() => {
console.log('setting displayLogsheet...')
if(logsheets){ // only dispatch this if logsheets have been fetched
dispatch(setDisplayLogsheets(logsheets))
}
}, [dispatch, logsheets])