Question

我是React Native和Redux的初学者，并且是第一次使用它。我不确定如何使用App.js文件中store.getState（）中的返回值。

console.ignoredYellowBox = ["Remote debugger"];
import { YellowBox } from "react-native";
YellowBox.ignoreWarnings([
  "Unrecognized WebSocket connection option(s) `agent`, `perMessageDeflate`, `pfx`, `key`, `passphrase`, `cert`, `ca`, `ciphers`, `rejectUnauthorized`. Did you mean to put these under `headers`?",
]);
import React, { Component } from "react";
import { StyleSheet, Text, View, AsyncStorage } from "react-native";
import * as Font from "expo-font";
import { AppLoading } from "expo";
import AppNavigation from "./navigation/AppNavigator";
import { setNavigator } from "./navigationRef";
import userReducer from "./reducers/userReducer";
import chatReducer from "./reducers/chatReducer";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, combineReducers } from "redux";
import ReduxThunk from 'redux-thunk';
import createSocketIoMiddleware from "redux-socket.io";
import io from "socket.io-client";

const store = createStore(combineReducers({userReducer, chatReducer}), applyMiddleware(ReduxThunk));
class App extends Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      fontLoaded: false,
    };
  }
  async componentWillMount(){
    const response = await(store.getState().userReducer.token)
    console.log("Response:", response)
  }
  render() {

    const fetchFont = () => {
      return Font.loadAsync({
        "raleway-bold": require("./assets/fonts/Raleway-Bold.ttf"),
        ralewayBold: require("./assets/fonts/Raleway-Bold.ttf"),
        "roboto-regular": require("./assets/fonts/Roboto-Regular.ttf"),
        robotoRegular: require("./assets/fonts/Roboto-Regular.ttf"),
        Roboto_medium: require("./assets/fonts/Roboto-Regular.ttf"),
      });
    };
    if (!this.state.fontLoaded) {
      return (
        <AppLoading
          startAsync={fetchFont}
          onFinish={() => this.setState({ fontLoaded: true })}
          onError={(err) => {
            console.log(err);
          }}
        />
      );
    }
    return (
      <Provider store={store}>
        <AppNavigation
          ref={(navigator) => {
            setNavigator(navigator);
          }}
        />
      </Provider>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;

我想从此处访问redux状态以访问存储在其中的令牌。在提到几篇文章之后，我尝试使用store.getState（）方法，但是当我进行console.log记录时，我得到的是空

Answer 1

您不应直接使用对store的引用，而应使用方法connect连接组件，在这种情况下，应将App连接到商店，如下所示：

import { connect } from 'react-redux';
...
class App extends Component {
   constructor(props) {
     console.log(props.token);//you will get here the token
     ...
   }
   ...
}
....
const mapStateToProps = (state) => {
  return {
    token: state.userReducer.token,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {//You should put here your dispatch methods later
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App)

---------------编辑-----------

我刚刚注意到您正在尝试访问App组件中的store，但是由于您是在App.render方法中定义提供者的，因此您应该执行以下两项操作之一： 1）您应该在应用程序上方添加<Provider store={store}>一级。在索引中。

<Provider store={store}>
 <App />
</Provider>

在这种情况下，App渲染不应再包含提供程序。

2）您应该将使用令牌的逻辑移到App以下的级别，并在以下组件上使用connect：

class IntermediateComponent extends Component {
  constructor(props) {
     console.log(props.token);//you will get here the token
     ...
  }
}
const mapStateToProps = (state) => {
  return {
    token: state.userReducer.token,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {//You should put here your dispatch methods later
  };
};
const ConnectedIntermediateComponent = connect(mapStateToProps, mapDispatchToProps)(IntermediateComponent)

class App extends Component {
  ...
  render() {
    <Provider store={store}>
      <ConnectedIntermediateComponent>
        <AppNavigation
          ref={(navigator) => {
            setNavigator(navigator);
          }}
        />
      </ConnectedIntermediateComponent>
    </Provider>
  }
}

export default App;

请注意，在2）中，App已不再连接。

Answer 2

简要详情

App.js 调用的示例代码

<Provider store={store}>
 <App />
</Provider>

现在我们将尝试在没有 react-redux 的 connect 的情况下从 store 中dispatch 和 getState >

通过这种方式，我们将不需要mapStateToProps和mapDispatchToProps

因为我们已经在 App.js 中导入我们的store。例如

import store from "./redux/store";

首先，我们通过 store 直接从 App.js 分派一些动作。

就像我们在 epic 文件夹中有一些这样的操作

import {someAction} from './redux/epics/fetch-some-epic'

现在这是我们来自 App.js

的 dispatch 操作

    store.dispatch(someAction())

这是我们可以在 App.js

中从 store 获得的状态

store.getState().someState

感谢和问候

别忘了关注

LinkedIn

如何在App.js中访问Redux状态（React-Native）

2 个答案: