我现在正在学习反应和减少,但我无法弄清楚如何在状态改变后迫使组件重新渲染。
这是我的代码:
2
我可以触发更新的唯一方法是使用
Auth::user()->likes()->where('status_id', $status->id)->first() ? Auth::user()->likes()->where('status_id', $status->id)->first()->like == 1 ? 'You like this post' : 'Like' : 'Like'
内部构造函数,以便我手动触发组件的更新状态以强制重新呈现。
但我如何链接商店和组件状态?
答案 0 :(得分:12)
如果组件的状态或道具发生变化,您的组件才会重新渲染。您不是依赖于this.state或this.props,而是直接在渲染函数中获取商店的状态。
相反,您应该使用connect
将应用程序状态映射到组件道具。组件示例:
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
export class App extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
return (
<div>
{this.props.isLoggedIn ? 'Logged In' : 'Not Logged In'}
</div>
);
}
}
App.propTypes = {
isLoggedIn: PropTypes.bool.isRequired
};
function mapStateToProps(state, ownProps) {
return {
isLoggedIn: state.isLoggedIn
};
}
export default connect(mapStateToProps)(App);
在这个非常简单的示例中,如果商店的isLoggedIn值发生变化,它将自动更新组件上的相应道具,这将导致它呈现。
我建议您阅读react-redux文档以帮助您入门: http://redux.js.org/docs/basics/UsageWithReact.html
答案 1 :(得分:0)
我在这里结束了,因为我写了一个糟糕的减速器。我有:
const reducer = (state=initialState, action) => {
switch (action.type) {
case 'SET_Q':
return Object.assign(state, { // <- NB no {}!
q: action.data,
})
default:
return state;
}
}
我需要:
const reducer = (state=initialState, action) => {
switch (action.type) {
case 'SET_Q':
return Object.assign({}, state, { // <- NB the {}!
q: action.data,
})
default:
return state;
}
}