从App.js中的store中访问数据.- Redux Persist

Question

我被这个问题卡住了。如有任何帮助，不胜感激。

我在我的react native应用程序中使用Redux Persist，我想在app .js中从store.js访问存储在状态'number'中的数据。

我已将我的代码粘贴到下面。

这是我的actions.js

export const setNumber = number => dispatch => {
dispatch({
type: SET_NUMBER,
payload: number,
});
};

reducers.js

import {SET_NUMBER} from './actions';
const initialState = {
number: [],
};
function numberReducer(state = initialState, action) {
switch (action.type) {
case SET_NUMBER:
return {...state, number: action.payload};
default:
return state;
}
}
export default numberReducer;

store.js

import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {persistStore, persistReducer} from 'redux-persist';
import numberReducer from './reducers';
const persistConfig = {
key: 'root',
storage: AsyncStorage,
whitelist: ['number'],
};
const rootReducer = combineReducers({
numberReducer: persistReducer(persistConfig, numberReducer),
});
const store = createStore(rootReducer, applyMiddleware(thunk));
const persistor = persistStore(store);
export {store, persistor};

App.js

import React, {Component} from 'react';
import {View, Text, SafeAreaView, Button} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Provider} from 'react-redux';
import {store, persistor} from './redux/store';
import {PersistGate} from 'redux-persist/integration/react';
import {connect} from 'react-redux';
import Login from './screens/Login';
import Home from './screens/Home';
import Details from './screens/Details';
const Stack = createNativeStackNavigator();
function App() {
if (number == null) {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{
headerStyle: {
backgroundColor: 'lightblue',
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
} else {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options={{
headerStyle: {
backgroundColor: 'lightblue',
},
}}
/>
<Stack.Screen
name="Home"
component={Home}
options={{
headerStyle: {
backgroundColor: 'lightblue',
},
}}
/>
<Stack.Screen
name="Details"
component={Details}
options={{
headerStyle: {
backgroundColor: 'lightblue',
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
</PersistGate>
</Provider>
);
}
}
export default App;

我想访问'number'中的数据，以便我的'if条件'可以在App.js中工作，现在它说变量'number'找不到，这是可以理解的。是否有任何方法，我可以访问数据在"数字"如果条件工作。提前谢谢。

Answer 1

你可以直接从你的商店访问状态，像这样

store.getState().number

但是，像这样直接进入商店是不可取的。

请注意，除非绝对必要，否则redux特别建议不要尝试在代码库中的其他文件中导入和使用存储。

参考:https://redux.js.org/style-guide/style-guide#only-one-redux-store-per-app

Answer 2

您正在寻找react-redux中的'useSelector'钩子。您可以这样实现它。

const num = useSelector(state =>state.numberReducer.number)

这里的问题是它不能工作，因为它不在Provider/store中。您需要对这里的条件语句做一个小的修改，以确保您可以访问存储。

<Provider store={store}
<PersistGate loading={null} persistor={persistor}>
<NavigationContainer>
--- 
do your conditional stuff here, but in another file. use the 
useSelector there. ideally put the conditional in the prop 
'initialRouteName' as I mentioned in a comment below
---
</NavigationContainer>
</PersisGate>
</Provider>