Импортируйте созданное избыточное хранилище для отправки действия из несвязанного компонента

Question

Я использую реагирующе-нативный и редукционный. Я также использую навигацию реакции, у меня есть навигатор нижней вкладки, где второй RouteConfig navigationOptions предоставляет функцию для tabBarOnPress. Я хочу отправить некоторые действия для редукции внутри этого обратного вызова.

import store from "./Store"    

const BottomTab = createBottomTabNavigator(
    {
        First: FirstScreen,
        Second: {
           screen: SecondScreen,
           navigationOptions: {
               tabBarOnPress: ({ navigation }: any) => {
                   store.dispatch(someAction())
                   navigation.navigate("SecondScreenModal");
               }
           }
        },
        Third: ThirdScreen
    },
    {
        navigationOptions: ({ navigation }) => ({
        //..
    }
);

Поскольку я не могу найти способ подключения навигатора нижней вкладки, я хотел бы знать, является ли в этом случае плохой практикой прямой импорт созданного хранилища избыточных данных (то же самое, которое я передаю поставщику как опору) ).

import rootReducer from "./RootReducer";
import {createStore} from "redux";

store = createStore(rootReducer)     
export default store

Answer 1

Внутри экрана, на который вы хотите отправить действие приведения (в вашем случае SecondScreen), установите параметр навигации, равный функции, которую вы хотите выполнить. Вы можете назвать параметр как угодно, но я обычно называю его в соответствии с тем, как я буду его использовать.

componentDidMount = () => {
  this.props.navigation.setParams({ tabBarOnPress: this.props.myReduxActionCreator })
}

Тогда внутри ваших экранных опций навигации вы можете сделать что-то подобное для доступа к функции. Убедитесь, что это то же имя параметра сверху, поэтому в этом примере 'tabBarOnPress'

const BottomTab = createBottomTabNavigator(
  {
    First: FirstScreen,
    Second: {
      screen: SecondScreen,
      navigationOptions: {

        // Access the function inside navigation params here
        tabBarOnPress: ({navigation}) => navigation.getParam('tabBarOnPress', null)
      }
    },
    Third: ThirdScreen
  },
  {
    navigationOptions: ({navigation}) => ({})
  }
)

Answer 2

После const BottomTab = createBottomTabNavigator() этот полный ящик кода mapStateToProps, mapDispatchToProps функционирует стрелка.

    export default connect(mapStateToProps, mapDispatchToProps)(BottomTab);

Я верю, что ты хочешь поступить так.