React Native：Redux-是否可以从App.js分发到Redux商店？

如何解决React Native：Redux-是否可以从App.js分发到Redux商店？

我正在开发一个本机应用程序，我将所有东西都连接到一个redux存储，以便我可以通过这种方式管理数据。

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

在下面的示例中，如果可能的话，我将如何从callApi运行setData和App.js到Redux Store？还是应该避免尝试设置全局变量？

下面是示例代码：

App.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 （我将我的reducer设置如下）

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)

解决方法

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

,

是的，有可能。

我有一个这样的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" });