Как получить простую отправку из this.props с помощью Connect W /Redux?

У меня есть простой компонент React, который я подключаю (отображение простого массива /состояния поверх). Чтобы не ссылаться на контекст для магазина, я хотел бы получить способ «отправки» напрямую из реквизита. Я видел, как другие использовали этот подход, но по какой-то причине у него нет доступа к нему:)

Вот версии каждой зависимости npm, которую я использую в настоящее время

"react": "0.14.3",
"react-redux": "^4.0.0",
"react-router": "1.0.1",
"redux": "^3.0.4",
"redux-thunk": "^1.0.2"

Вот компонент с методом подключения

class Users extends React.Component {
    render() {
        const { people } = this.props;
        return (
            <div>
                <div>{this.props.children}</div>
                <button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: 4}); }}>Add User</button>
            </div>
        );
    }
};

function mapStateToProps(state) {
    return { people: state.people };
}

export default connect(mapStateToProps, {
    fetchUsers
})(Users);

Если вам нужно увидеть редуктор (ничего интересного, но он здесь)

const initialState = {
    people: []
};

export default function(state=initialState, action) {
    if (action.type === ActionTypes.ADD_USER) {
        let newPeople = state.people.concat([{id: action.id, name: 'wat'}]);
        return {people: newPeople};
    }
    return state;
};

Если вам нужно посмотреть, как сконфигурирован мой маршрутизатор w /redux

const createStoreWithMiddleware = applyMiddleware(
      thunk
)(createStore);

const store = createStoreWithMiddleware(reducers);

var Route = (
  <Provider store={store}>
    <Router history={createBrowserHistory()}>
      {Routes}
    </Router>
  </Provider>
);

Обновление

выглядит так, что если я опущу свою собственную диспетчеризацию в соединении (в настоящее время выше я показываю fetchUsers), я получу бесплатную диспетчеризацию (просто не уверен, будет ли так обычно работать установка с асинхронными действиями) Люди смешивают и сопоставляют или все или ничего?

[mapDispatchToProps]

91 голос | спросил Toran Billups 25 FriEurope/Moscow2015-12-25T01:00:26+03:00Europe/Moscow12bEurope/MoscowFri, 25 Dec 2015 01:00:26 +0300 2015, 01:00:26

3 ответа


0

По умолчанию mapDispatchToProps - это просто dispatch => ({ dispatch }).
Поэтому, если вы не укажете второй аргумент для connect(), вы получите dispatch внедряется как компонент в ваш компонент.

Если вы передадите пользовательскую функцию mapDispatchToProps, вы можете сделать с ней что угодно.
Несколько примеров:

// inject onClick
function mapDispatchToProps(dispatch) {
  return {
    onClick: () => dispatch(increment())
  };
}

// inject onClick *and* dispatch
function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onClick: () => dispatch(increment())
  };
}

Чтобы сэкономить на вводе текста, Redux предоставляет bindActionCreators(), который позволяет включить это:

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return {
    onPlusClick: () => dispatch(increment()),
    onMinusClick: () => dispatch(decrement())
  };
}

в это:

import { bindActionCreators } from 'redux';

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    onPlusClick: increment,
    onMinusClick: decrement
  }, dispatch);
}

или даже короче, когда имена реквизитов совпадают с именами создателей действий:

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

Если вы хотите, вы можете добавить туда dispatch вручную:

// injects increment, decrement, and dispatch itself
function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators({ increment, decrement }), // es7 spread syntax
    dispatch
  };
}

Официальных рекомендаций о том, следует ли вам это делать или нет, нет. connect() обычно служит границей между компонентами, поддерживающими Redux, и компонентами, не поддерживающими Redux. Вот почему мы обычно чувствуем, что не имеет смысла вставлять как создателей связанных действий, так и dispatch. Но если вы чувствуете, что должны это сделать, не стесняйтесь.

Наконец, шаблон, который вы используете прямо сейчас, - это ярлык, который даже короче вызова bindActionCreators. Когда все, что вы делаете, это возвращаете bindActionCreators, вы можете пропустить вызов, вместо того чтобы делать это:

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

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

можно записать так

export default connect(
  mapStateToProps,
  { increment, decrement } // injects increment and decrement
)(App);

Однако вам придется отказаться от этого красивого короткого синтаксиса всякий раз, когда вы захотите что-то более нестандартное, например, передать dispatch.

ответил Dan Abramov 25 FriEurope/Moscow2015-12-25T02:17:40+03:00Europe/Moscow12bEurope/MoscowFri, 25 Dec 2015 02:17:40 +0300 2015, 02:17:40
0

Обычно вы можете смешивать и сочетать в зависимости от того, что вы хотите.

Вы можете передать dispatch в качестве реквизита, если вы этого хотите:

export default connect(mapStateToProps, (dispatch) => ({
    ...bindActionCreators({fetchUsers}, dispatch), dispatch
}))(Users);

Я не уверен, как используется fetchUsers (как асинхронная функция?), но вы обычно используете что-то вроде bindActionCreators для отправки auto-bind , и вам не придется беспокоиться об использовании dispatch непосредственно в подключенных компонентах.

Использование директории dispatch связывает тупой компонент без сохранения состояния с редуксом. Что может сделать его менее портативным.

ответил Davin Tryon 25 FriEurope/Moscow2015-12-25T01:37:03+03:00Europe/Moscow12bEurope/MoscowFri, 25 Dec 2015 01:37:03 +0300 2015, 01:37:03
0

Хотя вы можете передать dispatch как часть dispatchToProps, я бы рекомендовал избегать доступа к store или dispatch непосредственно из ваших компонентов. Похоже, вам лучше обойтись, если передать создателю связанного действия второй аргумент connect dispatchToProps

Смотрите пример, который я разместил здесь, https://stackoverflow.com/a/34455431/2644281 о том, как пройти вниз по «создателю уже связанного действия», так что ваши компоненты не должны напрямую знать о магазине или отгрузке или зависеть от него.

Извините, что был краток. Я буду обновлять с дополнительной информацией.

ответил Erik Aybar 25 FriEurope/Moscow2015-12-25T02:10:14+03:00Europe/Moscow12bEurope/MoscowFri, 25 Dec 2015 02:10:14 +0300 2015, 02:10:14

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132