提供商不支持使用TabViewAnimated即时更改商店

Question

尝试通过我的React Native应用程序中的TabViewAnimated切换到另一个选项卡时出现以下错误。

我有两个子组件，Provider使用如下：

 render() {
        const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

        return (
            <Provider store={store}>
                <TabViewAnimated
                    style={styles.container}
                    navigationState={this.state}
                    renderScene={this._renderScene}
                    renderHeader={this._renderHeader}
                    onRequestChangeTab={this._handleChangeTab}
                />
            </Provider>
        );
    }

第一个子组件可以通过props访问状态树，但是当加载第二个子组件时，我得到了错误。

我的依赖关系如下：

"react": "16.0.0-alpha.6",
"react-native": "^0.44.0",
"react-native-tab-view": "0.0.66",
"react-redux": "^5.0.5",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"

感谢任何建议！

Answer 1

问题是每次调用render时都会创建一个新的store实例，这会导致此错误。

您可以通过在只发生一次的地方实例化您的商店来解决此问题，通常是在您的应用程序的入口点或在导出它的单独文件中：

// store.js
export default createStore(reducers, {}, applyMiddleware(ReduxThunk));

和

// App.js
import { store } from './store'

...

  render() {
    <Provider store={ store }> ... </Provider>
  }
...

希望这有帮助！