Question

我正在尝试将我的操作连接到堆栈中的一个屏幕中。经过数小时的摸索之后，我意识到由于某种原因，connect不能“连接”到我的屏幕。为什么在使用React Navigation时某些屏幕连接到Redux而有些却不连接？

const AppSwitchNavigator = createSwitchNavigator({
  Open: { screen: AuthStackNavigator },
  Home: { screen: MainStackNavigator }
})

const AppContainer = createAppContainer(AppSwitchNavigator)

class App extends Component {
  render() {
    return <Provider store={store}><AppContainer /></Provider>
  }
}

我似乎可以访问“主页”堆栈中的商店，但不能访问“开放”堆栈中的商店。这可能吗？我很困惑...

更新-我已经找到了解决方案。问题是，在我的堆栈导航器中，我没有导入所有屏幕，因此Redux Store不知道它们。因此，只需将所有屏幕导入堆栈导航器即可解决此问题。

Answer 1

在使用 redux 进行状态管理的React应用中，您可以轻松访问所有子组件中的状态（存储）提供商将它们包裹起来。

您可以像这样轻松地调用状态：

在减速器文件中：

initialState = {
    counter: 0
}

const Reducer = (state=initialState, action) => {
    switch(action.type){
      case(INCREMENT):
        return{
          ...state,
          counter: state.counter + 1
        }
    }
}

export default Reducer

并在您的首页或打开的页面中

：

import {connect} from 'react-redux'

----- rest of code -----

const mapStateToProps = state => {
    const counter = state.counter;
    return {counter}
};

export default connect(mapStateToProps)(YoucComponent)

有关redux的更多信息，您可以看到以下链接： https://redux.js.org/basics/example

Redux未连接到React Navigation中的所有堆栈

1 个答案: