Redux/ 带有道具的布局容器。使用 React Router 将道具从商店传递到布局

Question

我有一组容器，我现在已经分离出来了。布局包含应用导航链接。应用包含布局内的内容（实际上是子级）。

这是不使用带有导航链接的Layout 时代码的外观。

export const App = hot(module)(() => (
  <div>
    <Switch>
      <Route exact path="/login" component={ Login } />
      <Route path="/csp" component={ CspApp } />
    </Switch>
    <ToastContainer transition={ Flip }/>
  </div>
));

这位于ReactDOM.render 内：

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

这一切都有效，直到我将布局与基础 CspApp 分开。

我正在尝试添加一个布局，所以它看起来像这样：

export const App = hot(module)(() => (
  <div>
    <Switch>
      <Route exact path="/login" component={ Login } />
      <Layout> <----- Expecting props
        <Route path="/csp" component={ CspApp } />
      </Layout>
    </Switch>
    <ToastContainer transition={ Flip }/>
  </div>
));

我相信这会起作用，但非常正确的是，它期望顶部导航的道具能够正确呈现。

如何正确地将道具传递给这个？我可以通过将 store 一个一个传入组件来做到这一点：

  <Layout prop1={store.getState().prop1} action1={store.getState().action1}>

但是有没有更好的方法来实现这一点？

Answer 1

最简单的解决方案是连接布局component to the store：

export default connect(stateToProps, dispatchToProps)(Layout);

您将可以访问 Layout 组件中的商店。如果您需要将一些额外的道具传递给 Layout 组件，您应该在连接的组件顶部执行以下操作：

<div>
<Switch>
  <Route exact path="/login" component={ Login } />
  <Layout prop1="static-value" prop2={value}>
    <Route path="/csp" component={ CspApp } />
  </Layout>
</Switch>
<ToastContainer transition={ Flip }/>
</div>

更新：我明白你为什么感到困惑了，在 new Redux-React site's docs 我看不到以下常见且经常使用的模式，如果你需要调度带有一些 props 的 Action组件：

const stateToProps = state => ({ stateProp2: state.someValue });
const dispatchToProps = (dispatch, { prop1, stateProp2 }) => ({
    doSomethingWithProp1: () => {
      console.log(prop1);
      dispatch({ type: 'SOME_ACTION', payload: stateProp2 }); // Take advantage of Layout's props also you can pass some props directly from state and get them here
    },
});

export default connect(stateToProps, dispatchToProps)(Layout);

你可以从Layout组件的props中获取doSomethingWithProp1()函数并调用它：

export class Layout extends Component {
  render() {
    return <div>Layout -- <button onClick={this.props.doSomethingWithProp1}>Click here</button></div>
  }
}