我已经在我的 React
应用程序中实现了 Redux
,到目前为止效果很好,但我有一个小问题。
我的导航栏中有一个选项可以更改存储在 redux 的状态
中的区域设置
。当我更改它时,我希望每个组件都重新渲染以更改翻译。为此,我必须指定
区域设置:state.locale
在mapStateToProps
函数中...这会导致大量代码重复。
有没有办法将语言环境隐式传递到使用 react-redux
连接的每个组件的 props 中?
提前致谢!
最佳答案
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 }
关于reactjs - 在 redux 状态的语言环境更新后重新渲染 React 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38058378/