React mapDispatchToProps Действие объекта не работает - PullRequest
Новая
       15

React mapDispatchToProps Действие объекта не работает

0 голосов
/ 10 мая 2019

У меня есть это действие 

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

это действиеConstant 

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

, так что в итоге с приведенным выше кодом я получаю это.props.UserIsLoggedIn не является ошибкой функции, если я делаю UserIsLoggedIn(true);, то ничего не происходит ... Я не совсем понимаю, в чем проблема ..

в рамках расширения 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, тоже не работает ....

Ответы [ 3 ]

2 голосов
/ 11 мая 2019

<Provider store={store}> необходимо обернуть везде, где используется этот экспортируемый компонент. Это не может быть в пределах render метода Index. Как сейчас, метод connect не будет иметь доступа к вашему store.

Вам нужно что-то вроде: 

ReactDOM.render(<Provider store={store}><Index /></Provider>, document.getElementById("root"));

, а затем удалите часть Provider из метода render в Index: 

  render() {
    return (
        <BrowserRouter>
          <Route path="/" exact component={App} />
          <Route path="/:type" component={App} />
        </BrowserRouter>
    );
  }
0 голосов
/ 13 мая 2019

Спасибо @ Yusufali2205 и @RyanCogswell за вашу помощь, но они не устранили проблему ..

Для людей, которые ищут ответ на этот вопрос: index.js - первый файл в моей React для загрузки, затем App.js. С этой настройкой у меня есть <Provider store={store}> внутри index.js и внутри index.js. У меня нет доступа к хранилищу в методе рендеринга ИЛИ ни к каким жизненным циклам, таким как willmount или даже didmount или willunmount. Чтобы получить доступ к хранилищу, создайте его с помощью <Provider store={store}> в index.js и получите доступ к элементам хранилища в 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., если я пытаюсь выполнить диспетчеризацию в методе рендеринга с этим кодом {this.props.UserIsLoggedIn(true)} .. Я пытался сделать это, просто чтобы посмотреть, работает ли диспетчеризация, я не планирую иметь это на самом деле внутри рендера. Когда я завернул его в console.log, он работал нормально, как это {console.log(this.props.UserIsLoggedIn(true))} ..

Когда я переместил этих диспетчеров в метод жизненного цикла, они нормально работали без оболочки console.log ... как это 

  componentWillMount() {
    console.log(this.props.isUserLoggedIn)
    this.props.UserIsLoggedIn(true)
  }
0 голосов
/ 10 мая 2019

Вам необходимо отправить ваше действие 

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

Обновление: Если вы хотите использовать синтаксис объекта, вам нужно обернуть это действие в функцию: 

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