這些庫之一不適用於 react-native

Question

我有以下 redux 存儲文件：

import {applyMiddleware, compose, createStore} from 'redux';
import reducers from '../reducers/index';
import {createBrowserHistory} from 'history'
import {routerMiddleware} from 'connected-react-router';
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas/index';


const history = createBrowserHistory();
const routeMiddleware = routerMiddleware(history);
const sagaMiddleware = createSagaMiddleware();

const middlewares = [sagaMiddleware, routeMiddleware];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;


export default function configureStore(initialState) {
  const store = createStore(reducers(history), initialState,
    composeEnhancers(applyMiddleware(...middlewares)));

  sagaMiddleware.run(rootSaga);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers/index', () => {
      const nextRootReducer = require('../reducers/index');
      store.replaceReducer(nextRootReducer);
    });
  }
  return store;
}
export {history};

一旦我在app.js中導入configureStore() ，我就會收到此錯誤：

[Fri Dec 18 2020 20:06:22.730] ERROR ReferenceError: Can't find variable: document

這是我的app.js文件：

import 'react-native-gesture-handler';
import React from 'react';
import {Provider} from 'react-redux';
import AsyncStorage from '@react-native-community/async-storage';

import {DefaultTheme, Provider as PaperProvider} from 'react-native-paper';

import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';  

import AppHeader from './components/ui/AppHeader';
import Home from './views/Home';
import Login from './views/Login';
import MyCoupons from './views/MyCoupons';
import ShoppingCart from './views/ShoppingCart';
import Signup from './views/Signup';
import Intro from './views/Intro';

import AuthState from './context/auth/authState';
import ShoppingCartState from './context/shoppingCart/shoppingCartState';

import configureStore, {history} from './store';

export const store = configureStore();

const Tab = createBottomTabNavigator();

const App = () => {
  let localStorageUser = null;

  const getLocalStorageUser = async () => {
    try {
      localStorageUser = await AsyncStorage.getItem('user');
    } catch (error) {
      console.log(error);
    }
  };


  const getInitialRouteName = () => {
    switch(localStorageUser) {
      case null: return 'Cuenta'
      case '': return 'Cuenta'
      default: return 'Home'
    }
  }

  return (
    <>
      <AppHeader />
      <AuthState>
        <ShoppingCartState>
          <PaperProvider>
            <NavigationContainer>
              <Tab.Navigator 
                initialRouteName={getInitialRouteName()}
                screenOptions={({route}) => ({
                  tabBarIcon: ({focused, color, size}) => {
                    let iconName;

                    if (route.name == 'Home') {
                      iconName = focused? 'home': 'home-outline';
                    } else if (route.name == 'Mis Cupones') {
                      iconName = focused? 'film': 'film-outline';
                    } else if (route.name == 'Carrito') {
                      iconName = focused? 'cart': 'cart-outline';
                    } else if (route.name == 'Cuenta') {
                      iconName = focused? 'person-circle': 'person-circle-outline';
                    }

                    return <Icon name={iconName} color='blue' size={25} />
                  }
                })}
              >
                <Tab.Screen name='Home' component={Home} />
                <Tab.Screen name='Carrito' component={ShoppingCart} />
                <Tab.Screen name='Mis Cupones' component={MyCoupons} />
                <Tab.Screen name='Cuenta' component={Login}/>
              </Tab.Navigator>
            </NavigationContainer>
          </PaperProvider>
        </ShoppingCartState>
      </AuthState>
    </>
  );
};

export default App;

當我評論導入行時，應用程序運行。 我曾嘗試在不止一台 Mac 上使用react-redux和redux-saga與react-native ，而且始終相同，而且我從未找到任何文檔證明它們不適用於react-native 。 我什至為此找到了教程。

所有的庫都安裝了yarn並與項目的reactjs組件完美配合，只是不能與react-native配合使用。

Answer 1

我相信您提到的所有三個庫都可以與 react-native 配合使用。 沒有的是您在示例中導入的歷史記錄。 查看history的源代碼，可以清楚地識別出來：

https://github.com/ReactTraining/history/blob/master/packages/history/index.ts

export function createBrowserHistory(
  options: BrowserHistoryOptions = {}
): BrowserHistory {
  let { window = document.defaultView! } = options;
  let globalHistory = window.history;

但是，文檔object 在 react-native 上不可用。