React Redux 状态变化答案

【问题标题】：React Redux state changeReact Redux 状态变化
【发布时间】：2019-02-01 02:42:25
【问题描述】：

this.props.authState 保持不变，尽管我在 componentDidMount 函数中调度了一个操作：

componentDidMount() {
      if (localStorage.getItem('token')) {
        dispatch(updateAuthState('AUTHENTICATED'));
      }
  }

render() {
 <div>{this.props.authState}</div>
}

Home.propTypes = {
    authState: PropTypes.string
};

const mapStateToProps = (state) => {
    return {
        authState: state.authState
    }
};

const mapDispatchToProps = (dispatch) => {
  return {

  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);

输出为NO_AUTH（authState的初始值）

减速机：

export function authState(state = "NO_AUTH", action) {
    switch (action.type) {
        case 'AUTH_STATE':
            return action.authState;
        default:
            return state;
    }
}

知道为什么吗？

【问题讨论】：

请在这里分享你的减速机
因为你在 componentDidMount 中调度，这个方法每个组件只调用一次
不，这不是 componentDidMount() 的问题。除非之前卸载，否则不会再次挂载
请发帖stackoverflow.com/help/mcve

标签： reactjs redux react-redux

【解决方案1】：

如果你正在改变状态，那么组件将不会被重新渲染。您需要从减速器返回 {...state, authState}。然后您在

中验证您的更新状态

componentWillReceiveProps(nextProps)
  {
   }

我希望这能解决问题。

【讨论】：

只有在你有需要动态同步 props 的内部组件状态时才使用cwrp。否则你不需要cwrp，因为mapStateToProps 将分配新的道具，从而触发所有更新生命周期的组件重新渲染。
我只是声明它是为了验证状态变化，不建议使用它。

【解决方案2】：

您当前直接在未映射到的 componentDidMount 内调度：

connect(mapStateToProps, mapDispatchToProps)(Home);

这应该可以完成工作：

componentDidMount() {
      if (localStorage.getItem('token')) {
        this.props.onUpdateAuthState('AUTHENTICATED');
      }
  }

const mapDispatchToProps = (dispatch) => {
  return {
    onUpdateAuthState: function(authState) {
      dispatch(updateAuthState(authState));
    }
  }
};

现在，这将获得 authState：

const mapStateToProps = (state) => {
    return {
        authState: state.authState
    }
};

【讨论】：