Как получить простую отправку от этого.реквизит с помощью 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), я бы получил dispatch free (просто не уверен, что это то, как обычно работает настройка с асинхронными действиями). Люди смешиваются и сочетаются или это все или ничего?

[mapDispatchToProps]

3 88
javascript reactjs redux

3 ответа:

по умолчанию 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-aware и Redux-aware. Именно поэтому мы обычно чувствуем, что это не имеет смысла вводить и связанные создатели действий и 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 как хорошо.

250

вы можете смешивать и сочетать на основе чего вы хотели.

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

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

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

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

4

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

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

извините за краткость. Я буду обновлять ж / более подробную информацию.

1