Question

我有这个动作

export const UserIsLoggedIn = isLoggedIn => (
    { type: types.USER_IS_LOGGED_IN, isLoggedIn });

此actionConstant

export const USER_IS_LOGGED_IN = "USER_IS_LOGGED_IN";

index.js这样

import { UserIsLoggedIn } from "./redux/actions";


getUser = () => {
    this.authService.getUser().then(user => {
      if (user) {
        this.props.UserIsLoggedIn(true);
       }
    }
}
const mapDispatchToProps = {
  UserIsLoggedIn
}

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

所以最终通过上面的代码我得到了this.props.UserIsLoggedIn不是函数错误，如果我UserIsLoggedIn(true);没有任何反应……我不太明白问题出在哪里。

在redux chrome扩展程序内，我可以在下面发送，而不会出现错误：

{
type: "USER_IS_LOGGED_IN", isLoggedIn : true
}

下面通常是索引的样子

const store = configureStore();

class Index extends Component {
  componentWillMount() {
    this.getUser();
  }

  getUser = () => {
    this.authService.getUser().then(user => {
      if (user) {
        console.log(this.props.isUserLoggedIn);
        toastr.success("Welcome " + user.profile.given_name);
      } else {
        this.authService.login();
      }
    });
  };

  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <Route path="/" exact component={App} />
          <Route path="/:type" component={App} />
        </BrowserRouter>
      </Provider>
    );
  }
}

function mapStateToProps(state) {
    return {
      isUserLoggedIn : state.User.isLoggedIn
    }
  }

const mapDispatchToProps = {
  UserIsLoggedIn
}

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

ReactDOM.render(<Index />, document.getElementById("root"));

serviceWorker.unregister();

注意：另一方面，mapStateToProps也不起作用。...

Answer 1

<Provider store={store}>必须包装在使用此导出组件的任何位置。不能在render的{{1}}方法中。现在，Index方法将无法访问您的connect。

您需要以下内容：

store

，然后从ReactDOM.render(<Provider store={store}><Index /></Provider>, document.getElementById("root"));中的Provider方法中删除render部分：

Index

Answer 2

您需要调度动作

const mapDispatchToProps = dispatch => ({
  UserIsLoggedIn: (value) => {
    dispatch(UserIsLoggedIn(value));
  }
});

更新：如果要使用对象语法，则需要将该操作包装在一个函数中：

 const mapDispatchToProps = {
  UserIsLoggedIn: (value) => UserIsLoggedIn(value),
};

Answer 3

感谢@ Yusufali2205和@RyanCogswell的帮助，但这些都无法解决问题。

对于正在寻找答案的人们： index.js是我的React中第一个加载的文件，然后是App.js。通过此设置，我在index.js和index.js中都拥有<Provider store={store}>，但是我无法在render方法或任何生命周期（例如willmount或didmount或willunmount）中访问存储。要访问商店，请在index.js中使用<Provider store={store}>创建商店，并在App.js中访问商店项目。

关于分派操作错误，如果我尝试使用此代码Objects are not valid as a React child (found: object with keys {type, isLoggedIn}). If you meant to render a collection of children, use an array instead.在render方法中分派，我仍然会遇到{this.props.UserIsLoggedIn(true)}错误。我试图这样做只是为了查看分派是否有效，我不知道并不打算在渲染器中实际使用它。当我用console.log包装它时，它像{console.log(this.props.UserIsLoggedIn(true))}一样工作正常。

当我将这些调度程序移至生命周期方法下时，它们在没有console.log包装程序的情况下工作正常……

  componentWillMount() {
    console.log(this.props.isUserLoggedIn)
    this.props.UserIsLoggedIn(true)
  }

React mapDispatchToProps对象操作不起作用

3 个答案: