从 App.js 中的商店访问数据。 - Redux 坚持答案

【问题标题】：Access data from store in App.js. - Redux Persist从 App.js 中的商店访问数据。 - Redux 坚持
【发布时间】：2021-10-18 16:39:57
【问题描述】：

我被这个问题困住了。任何帮助将不胜感激。

我在我的 react 本机应用程序中使用 Redux Persist，我想从 App.js 中的 store.js 访问存储在状态“数字”中的数据。

我在下面粘贴了我的代码。

这是我的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' 找不到，这是可以理解的。有什么方法可以访问“数字”中的数据以使条件正常工作。提前致谢。

【问题讨论】：

标签： reactjs react-native redux redux-persist mapstatetoprops

【解决方案1】：

您正在寻找 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>

【讨论】：

根据您如何冗余设置路线，我想您也会发现这很有帮助：Stack.Navigator 有一个名为“initialRouteName”的道具。这样您就不需要编写两组不同的导航。

【解决方案2】：

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

store.getState().number

但是，这样直接访问商店是不可取的。

请注意，除非绝对必要，否则 redux 明确建议不要尝试将 store 导入和使用到代码库中的其他文件中。

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

【讨论】：