时间戳

首页 > 解决方案 > 从 App.js 中的商店访问数据。- Redux 坚持

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

问题描述

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

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

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

这是我的actions.js


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

减速器.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};

应用程序.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;

我想访问“数字”中的数据，以便我的“如果条件”可以在 App.js 中工作现在它说找不到变量“数字”，这是可以理解的。有什么方法可以访问“数字”中的数据以使条件正常工作。提前致谢。

标签： reactjsreact-nativereduxredux-persistmapstatetoprops

解决方案

您正在寻找 react-redux 的“useSelector”钩子。你会像这样实现它。

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

但这里的问题是它不起作用，因为它不在提供者/商店内。您需要对那里的条件语句进行少量修改，以确保您可以访问商店。

<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>

推荐阅读