Question

我创建了组件并使用connect（）连接它，如下所示：

function mapStateToProps(state) {
  return { users: state.users.users }
}

function mapDispatchToProps(dispatch) {
   return { userActions: bindActionCreators(UserActions, dispatch) }
}

export default connect(mapStateToProps, mapDispatchToProps)(Test)

可悲的是，当我在Chrome中打开React工具时，我得到了这个：更改状态不会强制组件更新。为什么不订阅呢？

修改

我通过动作创建者和减速器改变状态。这就是它的样子：

export function addUser(user) {
  return function (dispatch) {
    axios.post('http://localhost:4200/users/add/user', {user:user})
      .then(() => dispatch({
        type: USER_ADD,
        user: user
      })).catch(err => console.log(err));
  }
}

export function getUsers() {
  return function (dispatch) {
    axios.get('http://localhost:4200/users')
    .then((response) => dispatch({
      type: REQUEST_USERS,
      users:response.data
    })).catch(err => console.log(err));
  }
}

和reducer：

export function users(state = initialState, action) {
  switch (action.type) {
    case 'USER_ADD':
      {
        return {
      ...state,
      users: [
        ...state.users,
        action.user
      ]
    }
        break;
      }
    case 'REQUEST_USERS':
      {
        return {
          ...state,
          users: [
            action.users
          ]
        }
        break;
      }
      .........

这是我的全部内容：

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      login: "",
      password: ""
    }
  }

  handleLoginInputChange = (e) => {
    this.setState({login: e.target.value})
  }

  handlePasswordInputChange = (e) => {
    this.setState({password: e.target.value})
  }

  handleSubmit = (e) => {
    e.preventDefault()
    let user = {login:this.state.login, 
password:this.state.password,userId:Math.floor(Math.random()*(100000))};
    this.props.userActions.addUser(user);
  }

  render() {
    return (
      <div className="test">
        <form>
          <input type="text" onChange={this.handleLoginInputChange} value=
{this.state.login} placeholder="login"/>
          <input type="text" onChange={this.handlePasswordInputChange} 
value={this.state.password} placeholder="pass"/>
          <button onClick={this.handleSubmit}>send</button>
        </form>
        <UsersList users = {this.props.users} />
      </div>
    )
  }

  componentDidMount() {
    this.props.userActions.getUsers();
  }
}

function mapStateToProps(state) {
  return { users: state.users.users }
}

function mapDispatchToProps(dispatch) {
  return { userActions: bindActionCreators(UserActions, dispatch) }
}

export default connect(mapStateToProps, mapDispatchToProps)(Test)

我已将所有内容添加到github中，因此您可以看到它github。

你感兴趣的东西是reducers / users.js，actions / useractions和components / Test.js。

从服务器获取数据后的状态如下所示：。

我尝试了很多不同的方法。现在我放弃了添加新用户后更改状态。而不是我已经制作了可以从服务器获取数据的按钮 - 它正在重新加载页面，因此我对该解决方案不满意

Answer 1

你确定这是正确的吗？

function mapStateToProps(state) {
  return { users: state.users.users }
}

你如何将减速机绑定到商店？状态可能与您在connect中的预期不同。你可以在组件安装后发布商店包含的内容吗？

React组件未订阅redux商店

1 个答案: