react Redux 状态变化

IT技术 reactjs redux react-redux
2021-03-26 15:00:39

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

知道为什么吗？

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

如果您正在改变状态，则不会重新呈现组件。您需要{...state, authState}从减速机返回。然后你验证你的更新状态

componentWillReceiveProps(nextProps)
  {
   }

我希望这能解决问题。

仅cwrp当您有需要与 props 动态同步的内部组件状态时才使用。否则，你并不需要cwrp为mapStateToProps即将分配因而新道具触发组件重新呈现与所有更新的生命周期。
2021-05-23 15:00:39
我只是说它是为了验证状态变化，不建议使用它。
2021-06-07 15:00:39
其它你可能感兴趣的问题
上一篇如何在全局选项卡中创建动态元素 下一篇警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”prop