Question

我很难用某些东西，但我不确定这是预期的行为。

我创建了一个容器包装器，它将连接的组件作为参数：

import store from 'somewhere'

const ComponentWrapper = (Container, railsProps, _railsContext) => {
  return (
    <Provider store={store}> 
      <Container {...railsProps} />
    </Provider>
  )
};

将store.js定义为：

const epicMiddleware = createEpicMiddleware(rootEpic, {
    dependencies: {}
  });

  const logger = createLogger({
    collapsed: true,
  });

export default createStore(RootReducer, {}, applyMiddleware(epicMiddleware, logger))

快乐的日子，正如预期的那样，只创建了一个商店，每个商店都连接到那个商店。我最终会在页面中插入多个这些组件，尽管每个组件都包含在它自己的提供者/商店中，但redux知道只使用一个商店。这里的行为正是我想要和期待的。

但是，如果我重新定义我的store.js：

const epicMiddleware = createEpicMiddleware(rootEpic, {
    dependencies: {}
  });

  const logger = createLogger({
    collapsed: true,
  });

export const configureStore = (railsState) => {
    return createStore(RootReducer, railsState, applyMiddleware(epicMiddleware, logger))
}

导出默认的configureStore 并按照上面的方式包装我的组件，但更改

<Provider store={configureStore({})}> 
      <Container {...railsProps} />
</Provider>

安装组件时，每个组件都有自己的存储。我相信它可能与storeKey的设置有关？但是，我认为这是configureStore({}) returns createStore(RootReducer, {}, applyMiddleware(epicMiddleware, logger))以来的意外行为。

为什么我相信每个组件都有自己的商店？因为如果我最初定义我的商店，并且我将同一组件的两个副本安装到我的DOM中，则每个组件都会监听相同的状态更改（通过调度操作）并相应地重新呈现 - 正如预期的那样 - 这两个组件已连接在相同的状态片段中，其变化导致两个组件中的重新渲染 - 每次都让我微笑。如果我定义了后一个定义中所示的store.js，则一个组件的更改仅显示在该组件中，而不是另一个组件中的两个组件正在侦听两个不同的状态切片。由于它们只是完全相同组件的副本（技术上是容器，因为我使用容器/表示组件模式），它们实际上都连接到不同的商店。

我希望我已经正确解释了这一点。

Answer 1

引用官方Redux docs：

单一来源

整个应用程序的状态存储在对象树中   一家商店。

我不确定您是否真的需要将组件包装到其他商店。至少对于大多数用例而言，您不需要这样做，并且您将很难在这些商店之间共享数据。

而不是以这种方式创建商店：

<Provider store={configureStore({})}> 
      <Container {...railsProps} />
</Provider>

在导入时调用您的商店

const store = configureStore()

// Just one Provider on top level, 
// you can wrap <Provider> with react router v4 <Router>
// App is our root component
<Provider store={store}> 
      <App />
</Provider>

请参阅redux示例https://redux.js.org/introduction/examples

React redux - 从函数<provider store =“{configureStore（）}”>传递商店创建一个新商店

1 个答案: