提供程序不支持使用 TabViewAnimated 动态更改存储

Question

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

我有两个sub-components并且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>
        );
    }

第一个 sub-component 可以通过道具访问状态树，但是在加载第二个 sub-component 时出现错误。

我的依赖如下：

"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>
  }
...

希望对您有所帮助！

提供程序不支持使用 TabViewAnimated 动态更改存储

Provider does not support changing store on the fly with TabViewAnimated

react-native

redux

redux-thunk

react-redux