reactjs - 在 redux 状态的语言环境更新后重新渲染 React 组件

Question

我已经在我的 React 应用程序中实现了 Redux，到目前为止效果很好，但我有一个小问题。

我的导航栏中有一个选项可以更改存储在 redux 的状态中的区域设置。当我更改它时，我希望每个组件都重新渲染以更改翻译。为此，我必须指定

区域设置:state.locale

在mapStateToProps函数中...这会导致大量代码重复。

有没有办法将语言环境隐式传递到使用 react-redux 连接的每个组件的 props 中？

提前致谢!

Answer 1

Redux 实现了 shouldComponentUpdate这会阻止组件更新，除非它的 props 被更改。

在您的情况下，您可以通过将 pure=false 传递给 connect 来忽略此检查:

connect(select, undefined, undefined, { pure: false })(NavBar);

出于性能原因，这是一件好事，但可能不是您想要的。

相反，我建议编写一个自定义连接函数，以确保 locale 始终添加到您的组件属性中:

const localeConnect = (select, ...connectArgs) => {
  return connect((state, ownProps) => {
    return {
      ...select(state, ownProps),
      locale: state.locale
    };
  }, ...connectArgs);
};

// Simply use `localeConnect` where you would normally use `connect`
const select = (state) => ({ someState: state.someState });

localeConnect(select)(NavBar);  // props = { someState, locale }