如何在 App.js React Native 中使用 redux 组件？答案

【问题标题】：How to use redux component in App.js React Native?如何在 App.js React Native 中使用 redux 组件？
【发布时间】：2021-04-30 04:32:36
【问题描述】：

我正在做一个简单的计数器应用程序。它有一个标签和一个按钮，您可以按 + 1 递增（每次按下它）。

使用redux，我想使用我在App.js 文件中存储（在我的Redux Store 中） 的计数。但是，我收到一个错误：

错误：找不到 react-redux 上下文值；请确保组件包装在 Provider 中

使用useSelector 可以在其他文件中使用，而不是App.js。有解决办法吗？

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Dogs from './components/Dogs';
import { Provider, useSelector } from 'react-redux';
import store from './redux/configureStore'

export default function App() {
  const count = useSelector((state) => state.counter.count);
{/*useSelector does not work in this file!*/}
  return (
    
    <Provider store={store}>
      <View style={styles.container}>
        <Text>{`ha ${count}`}</Text>
        <Dogs />
      </View>
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Counter.js

import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, Button} from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { increment } from '../redux/ducks/counter'

const Counter = () => {
    const count = useSelector((state) => state.counter.count);
 {/*useSelector works in this file!*/}
    const dispatch = useDispatch();

    const handleIncrement = () => {
        dispatch(increment())
    };

    return (
      <div>
        {/* <Text>{` COunt: ${count}`}</Text> */}
        <Button onPress={handleIncrement}>Increment</Button>
      </div>
    );
}

const styles = StyleSheet.create({})

export default Counter;

redux/configureStore.js

import { combineReducers, createStore } from 'redux';
import counterReducer from './ducks/counter';

const reducer = combineReducers({
    counter: counterReducer
});

const store = createStore(reducer);

export default store;

redux/ducks/counter.js

const INCREMENT = 'increment';

export const increment = () => ({
    type: INCREMENT
})

const initialState = {
    count: 0
};

export default ( state = initialState, action) => {
    switch(action.type) {
        case INCREMENT:
            return{...state, count: state.count + 1}
        default:
            return state;
    }
};

【问题讨论】：

能否请您发布您在 ConfigureStore.js 中的内容？
@Annamalai 完成！

标签： react-native redux react-redux

【解决方案1】：

useSelector 仅在将其包装在 Provider 中时才有效。您可以为App 创建一个包装文件。

const AppWrapper = () => {
  return (
    <Provider store={store}> // Set context
      <App /> // Now App has access to context
    </Provider>
  )
}

在App.js

const App = () => {
  const count = useSelector((state) => state.counter.count); // will Work!
}

【讨论】：

【解决方案2】：

正如错误所说，您在提供者之外使用useSelector。在您的 app.js 中，您在应用程序呈现之前使用 useSelector，因此它无法找到商店。因此，为您想在 app.js 中使用的功能创建一个组件，如下所示：

创建一个文件，将其命名为 CountView.js，在 CountView.js 中使用您的 redux 登录名： CountView.js

import React from 'react';
import { Text } from 'react-native';
import { useSelector } from 'react-redux';

const CountView = () => {
  const count = useSelector((state) => state.counter.count);

  return (
    <Text>{`ha ${count}`}</Text>
  )
}

export default CountView;

现在，在你的 app.js 中使用这个组件：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Dogs from './components/Dogs';
import { Provider } from 'react-redux';
import store from './redux/configureStore'
import CountView from '../components/CountView'; // import CountView component

export default function App() {
  return (
    <Provider store={store}>
      <View style={styles.container}>
        {/* Use component here */}
        <CountView /> 
        <Dogs />
      </View>
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

保持其他东西不变，现在你的功能就可以工作了。

【讨论】：