0

我正在开发一个 react native 应用程序，我将所有东西都连接到一个 redux 商店，这样我就可以用这种方式管理数据。

我很好奇从App.js我用来路由我的应用程序的组件中调度数据的可能性。用例是在 redux 存储中进行 API 调用App.js并从那里设置数据，以便应用程序可能在每次打开时都进行该调用。例如，我知道 componentDidMount 在应用程序打开时运行一次代码，但除非它关闭并重新打开，否则再也不会运行代码。我认为这App.js对于这样的事情可能会更好。如果这个假设不正确，我很抱歉，因为我还在学习。

在下面的示例中，如果可能的话，我将如何运行callApi并setData从App.jsRedux Store 运行？或者我应该避免这种尝试设置全局变量吗？

下面是示例代码：

应用程序.js

 import React, {Component} from 'react';
    import {createBottomTabNavigator} from 'react-navigation-tabs'
    import { createAppContainer, createSwitchNavigator } from 'react-navigation';
    import { Ionicons } from '@expo/vector-icons';
    import { Provider } from 'react-redux';
    import { createStore } from 'redux';
    
    import ourReducer from './store/reducer';
    const store = createStore(ourReducer);
    global.x = 'https://volleybuddy.metis-data.site'
    
    
    import Home from './components/Home'
    import Profile from './components/Profile'
    import Login from './components/Login'
    import SignUp from './components/SignUp'
    import StartScreen from './components/StartScreen'
    
    export default class App extends Component {
    
    
      render(){
    
        return (
          
          <Provider store={ store }>
            <AppContainer/>
          </Provider>
        );
        }
    }
    
    const bottomTabNavigator = createBottomTabNavigator(
      {
        Home: {
          screen: Home,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
              <Ionicons  name="ios-home" size={25} color={tintColor}/>
              // <Icon name="qrcode" size={25} color={tintColor} />
            )
          }
        },
        Profile: {
          screen: Profile,
          navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
              // <Icon name="search" size={25} color={tintColor} />
              <Ionicons  name="md-person" size={25} color={tintColor}/>
            )
          }
        },
      },
      {
        initialRouteName: 'Home',
        tabBarOptions: {
          activeTintColor: '#eb6e3d'
        }
      }
    );
    
    const RootSwitch = createSwitchNavigator({ 
      StartScreen,
      SignUp,
      Login,
      bottomTabNavigator
      });
    
    const AppContainer = createAppContainer(RootSwitch);

Reducer.js（我设置我的减速器是这样的）

import { combineReducers } from 'redux';

const INITIAL_STATE = {
    data: null
};

const ourReducer = (state = INITIAL_STATE, action) => {
    const newState = { ...state };

  switch (action.type) {
        
                    case "SET_DATA":
                      return{
                        ...state,
                        data: action.value
                      }
                    break;
  
  }
  return newState;
};


export default combineReducers({
  reducer: ourReducer,
});

Home.js（让我们说如果我想移动 callApi 也可以在 App.js 中运行）

import React, {Component} from 'react';
import { connect } from 'react-redux';

class Home extends Component {

    //NOT REAL CODE, JUST CONCEPT
    callApi =() => {
        fetch(....)
        let data = response
        this.props.setData(data)
    }

  render() {
    return (
        <React.Fragment>
            <View>
                <Button onPress={this.callApi}>
                    <Text>toggle tracking</Text>
                </Button>
            </View>
        </React.Fragment>
    );
  }
}

const mapStateToProps = (state) => {
    
    const { reducer } = state
    return { reducer }
  };

  const mapDispachToProps = dispatch => {
    return {
      setData: (x) => dispatch({ type: "SET_DATA", value: x}),
    };
  };

  export default connect(mapStateToProps,
    mapDispachToProps
    )(Home)
4

2 回答 2

0

您可以从应用程序中的任何位置调度数据，只要您可以使用 获取对商店的引用store.dispatch，在这种情况下，您可以在商店实例化后调度和操作 App 组件，但 App 组件本身并没有连接到商店所以它无法重新渲染以响应其上的更改，但在这种情况下，这对您来说应该不是问题。

于 2020-10-09T20:28:24.237 回答
0

对的，这是可能的。

我有一个这样的 store.js 文件：

import { createStore, combineReducers, applyMiddleware} from 'redux'
import reducer from './reducers'
import thunk from 'redux-thunk';
const middleware =  applyMiddleware(thunk)
const store = createStore(reducer,middleware)



export default store;

因此，在 App.js 文件中，我只需要像这样导入商店：

import store from './src/store'

您可以致电调度：

 store.dispatch({ type: "ACTION_EXAMPLE" });
于 2020-10-09T21:56:27.437 回答