javascript - react-redux自动更新的问题
本文介绍了javascript - react-redux自动更新的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
问下我自己建立一个redux的测试项目.现在reducer和action,store都有了,dispatch一个action后界面上没有发生变化.请问这是为什么
const Tpp = React.createClass({
onClick: function() {
Store.dispatch(Action.test()) //这里会触发test的action
},
render: function() {
return <div>
<div onClick={this.onClick} {...Store}>click</div>
{this.props.config} //原本这里应该自动更新的
</div>
}
});
const TAP = connect(test)(Tpp); //最后render的是这个tap
这是action
export const REDUX_TEST = 'REDUX_TEST';
export const REDUX_TEST2 = 'REDUX_TEST2';
export function test(){
return {
type:'REDUX_TEST',
data:'123123'
}
}
这是reducer
function reducer(state = {},action = {}){
state = dataModule;
switch (action.type){
case 'REDUX_TEST':
state.config= ++state.config;
console.log(state.config);
break;
}
return state
}
这是store建立
export const dataModule = {
config:0
};
export default createStore(Reducer,dataModule)
现在state确实更新了,但是第一段代码里本来应该跟新的地方,没有自动更新,请问怎么做才能让它自动更新啊?
解决方案
action
和 mapStateToProps
方法搞混了吧, connect
中注入的state不对
TPP组件下面改为
function mapStateToProps(state) {
return {
config: state.config
}
}
const TAP = connect(mapStateToProps)(Tpp)
另外reducer中你直接修改了state,正确的情况应该是 return state + 1
,而且你已经在 createStore
里面注入了初始状态,即改为
function reducer(state = 0, action) {
switch (action.type){
case 'REDUX_TEST':
return state + 1
default:
return state
}
}
LZ需要再看一遍官方的实现例子
这篇关于javascript - react-redux自动更新的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文