Как правильно подключить компонент ReactJS к Redux с помощью реакции-сокращения?

Question

Я пытаюсь создать свое первое соединение между компонентом React и Redux для сбора данных из моего API-интерфейса узла.

Это простой компонент на данный момент, но он будет расти в будущем и будет выводить подкомпоненты, которые позволят мне создать полный пользовательский интерфейс CRUD (список, редактировать, удалять, просматривать и т. Д.). В этом смысле мне нужно подключить функции действия к объекту this.props, чтобы он мог быть наследован дочерними компонентами.

Вот мой код:

Компонент UserGrid - Сетка таблицы данных, которые будут загружать пользователи информации

import React from 'react'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 
import * as userActions from '../../actions/userActions'; 

class UserGrid extends React.Component { 
    componentWillMount() { 
    this.props.fetchUsers(); 
    } 

    render() { 
    const mappedUsers = users.map(user => <li>{user.email}</li>); 
    return (
      <div> 
       <ul>{mappedUsers}</ul> 
      </div> 
     ); 
    } 
} 

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

export default connect(
    mapStateToProps, 
    bindActionCreators(userActions, dispatch) 
)(UserGrid); 

Мои userAction, что эффективно будет загружать пользователей из вызова AJAX:

import axios from "axios"; 

export function fetchUsers() { 
    return function(dispatch) { 
    axios.get("/api/users") 
     .then((response) => { 
     dispatch({type: "FETCH_USERS_FULFILLED", payload: response.data}); 
     }) 
     .catch((err) => { 
     dispatch({type: "FETCH_USERS_REJECTED", payload: err}); 
     }) 
    } 
} 

С помощью этого кода я получаю следующее ошибка:

Uncaught ReferenceError: dispatch is not defined 
    at Object.<anonymous> (bundle.js:37984) 
    at __webpack_require__ (bundle.js:556) 
    at fn (bundle.js:87) 
    at Object.<anonymous> (bundle.js:37711) 
    at __webpack_require__ (bundle.js:556) 
    at fn (bundle.js:87) 
    at Object.<anonymous> (bundle.js:8466) 
    at __webpack_require__ (bundle.js:556) 
    at fn (bundle.js:87) 
    at Object.<anonymous> (bundle.js:588) 
(anonymous) @ bundle.js:37984 
__webpack_require__ @ bundle.js:556 
fn @ bundle.js:87 
(anonymous) @ bundle.js:37711 
__webpack_require__ @ bundle.js:556 
fn @ bundle.js:87 
(anonymous) @ bundle.js:8466 
__webpack_require__ @ bundle.js:556 
fn @ bundle.js:87 
(anonymous) @ bundle.js:588 
__webpack_require__ @ bundle.js:556 
(anonymous) @ bundle.js:579 
(anonymous) @ bundle.js:582 

Каков правильный способ подключения моего компонента к созданным службам Redux?

Answer 1

В компоненте вы хотите подключить необходимо определить функцию mapDispatchToProps. Эта функция будет принимать отправку в качестве параметра и получит этот параметр, когда соединение вызывает функцию.

Вот пример кода, извлеченного из одного из моих последних проектов.

function mapDispatchToProps(dispatch) { 
     return { 
      adminActions: bindActionCreators(adminOrdersActions, dispatch), 
      schoolActions: bindActionCreators(schoolOrdersListActions, dispatch), 
      userActions: bindActionCreators(userActions, dispatch) 
     }; 
    } 

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

Теперь рассылка определена.

РЕДАКТИРОВАТЬ: для пояснения это сделает доступ к вашим действиям со следующим синтаксисом. this.props.actions.yourAction или что вы назвали действиями в mapDispatchToProps.

Это ваш код с моими изменениями:

import React from 'react'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 

import * as userActions from '../../actions/userActions'; 

class UserGrid extends React.Component { 

    componentWillMount() { 
    console.log(JSON.stringify(this.props)); 

    //this.props.fetchUsers(); 
    this.props.actions.fetchUsers(); 
    } 

    render() { 

    const mappedUsers = users.map(user => <li>{user.email}</li>) 

    return (
      <div> 
      <ul>{mappedUsers}</ul> 
      </div> 
     ) 
    } 
} 

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

function mapDispatchToProps(dispatch) { 
    // this function will now give you access to all your useractions by simply calling this.props.actions. 
    //if the key of this object would not be actions, but rather foobar, you will get your actions by 
    // calling this.props.foobar 
    return { 
     actions: bindActionCreators(userActions, dispatch) 
    } 
} 

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

Answer 2

Я не думаю, что вы хотите использовать bindActionCreators здесь. Вот что the docs сказать (курсив мой):

Normally you should just call dispatch directly on your Store instance. If you use Redux with React, react-redux will provide you with the dispatch function so you can call it directly, too.

The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it.

Так что это не то, что вы делаете, вы должны вместо этого позвонить dispatch напрямую. С среагировать-Redux, connect будет вводить его в свои реквизита, так что вы можете сделать это:

componentWillMount() { 
    this.props.dispatch(fetchUsers()); 
} 

Answer 3

Как Jordan said я бы не использовать bindActionCreators.

Ваш компонент должен выглядеть следующим образом:

import React from 'react'; 
import { connect } from 'react-redux'; 

import myAction from './my-action'; 

class MyComponent extends React.Component { 

    componentDidMount() { 
     this.props.myAction(); 
    } 

    render() { 
     return "Hi!" 
    } 

} 

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

const mapDispatchToProps = (dispatch) => ({ 
    myAction:() => dispatch(myAction()) 
}); 

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