开发者社区> 问答> 正文

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确实更新了,但是第一段代码里本来应该跟新的地方,没有自动更新,请问怎么做才能让它自动更新啊?

展开
收起
a123456678 2016-03-11 09:43:53 2729 0
1 条回答
写回答
取消 提交回答
  • 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
      }
    }
    2019-07-17 18:58:24
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
Flutter 应用框架 Fish-Redux 立即下载
搭建React Native生态 立即下载