问题描述
我一直在学习 Redux,我正在使用 Reselect 来记住状态。我的大多数组件与选择器一起工作得很好,但有一个组件的 to_char(1,'S9')
函数没有将部分数据发送到组件。
createStructuredSelector
事实上,由于某种原因,只有 const mapStatetoProps = createStructuredSelector({
currentUser: selectCurrentUser,hidden: selectCartHidden
})
export default connect(mapStatetoProps)(Header);
属性会进入组件。 hidden
只是不在那里。
如果我在没有选择器的情况下返回使用 currentUser
,它会再次工作。
mapStatetoProps
这是组件本身:
const mapStatetoProps = state => ({
currentUser: selectCurrentUser,hidden: selectCartHidden
})
export default connect(mapStatetoProps)(Header);
如果问题只影响到这个组件,我不会太担心,因为我可以切换回没有选择器的状态。但是出于某种原因,即使状态确实发生了变化,const Header = ({ currentUser,hidden }) => (
<div className="header">
<Link className="logo-container" to="/">
<logo className="logo" />
</Link>
<div className="options">
<Link className="option" to="/shop">SHOP</Link>
<Link className="option" to="/contact">CONTACT</Link>
{
currentUser ?
<div className="option" onClick={() => auth.signOut()}>SIGN OUT</div>
:
<Link className="option" to="/signin">SIGN IN</Link>
}
<CartIcon />
</div>
{
hidden ? null : <CartDropdown />
}
</div>
)
子组件也不会在没有 CartDropdown
的情况下重新渲染。
解决方法
我无法重现您的体验,一定是打字错误或其他原因:
const { Provider,connect } = ReactRedux;
const { createStore,applyMiddleware,compose } = Redux;
const { createStructuredSelector } = Reselect;
const initialState = {
currentUser: 'current user',cartHidden: 'cart hidden',};
const reducer = (state = initialState) => {
return state;
};
//selectors
const selectCurrentUser = (state) => state.currentUser;
const selectCartHidden = (state) => state.cartHidden;
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,initialState,composeEnhancers(
applyMiddleware(() => (next) => (action) =>
next(action)
)
)
);
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,hidden: selectCartHidden,});
const App = (props) => (
<pre>{JSON.stringify(props,undefined,2)}</pre>
);
const ConnectedApp = connect(mapStateToProps)(App);
ReactDOM.render(
<Provider store={store}>
<ConnectedApp />
</Provider>,document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reselect/4.0.0/reselect.min.js"></script>
<script src="https://unpkg.com/immer@7.0.5/dist/immer.umd.production.min.js"></script>
<div id="root"></div>
如果您无法获得 updated 状态,那么我猜您一定已经改变了减速器中的状态
但出于某种原因,CartDropdown 子组件不会在没有 createStructuredSelector 的情况下重新渲染,即使状态确实发生了变化。
你肯定在更糟的减速器中改变了状态;在组件或动作创建器中。