javascript - react-redux自动更新的问题

Question

问下我自己建立一个redux的测试项目.现在reducer和action,store都有了,dispatch一个action后界面上没有发生变化.请问这是为什么

const Tpp = React.createClass({
  onClick: function() {
    Store.dispatch(Action.test())   //这里会触发test的action
  },
  render: function() {
    return <p>
      <p onClick={this.onClick} {...Store}>click</p>
      {this.props.config}   //原本这里应该自动更新的
    </p>
  }
});
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确实更新了,但是第一段代码里本来应该跟新的地方,没有自动更新,请问怎么做才能让它自动更新啊?

Answer 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
  }
}

LZ需要再看一遍官方的实现例子

Answer 2

state没有通过redux映射到react组件的props

function mapStateToProps(state) {
  return {
    config: state.config
  };
}

connect(
  mapStateToProps,
  mapDispatchToProps
)(Component)

顺带一提，react组件中直接用store来dispatch也是不好的，dispatch的action同样应该映射到props上去。

function mapDispatchToProps(dispatch) {
  return {
    test: function() {
      dispatch(Action.test());
    }
  };
}

Answer 3

state.config= ++state.config

除了上边说的问题，这句也不能这么用，好好看看官方有关state的介绍和counter例子。counter例子中直接返回的state+1，是新对象。你这么做是直接修改了state对象，而没有返回一个新的对象。虽然能在当前逻辑中修改state，但是属于mutate操作，所以react是不会在其他地方更新state的。