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

92

У меня есть простой компонент 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;
};

Если вам нужно посмотреть, как настроен мой роутер с

const createStoreWithMiddleware = applyMiddleware(
      thunk
)(createStore);

const store = createStoreWithMiddleware(reducers);

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

Обновить

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

[mapDispatchToProps]

Ваш Ответ

2   ответа
5

что вы хотите.

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

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

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

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

Зачем распространять и передавать в рассылку прямо в bindActionCreators?dispatch => ( bindActionCreators({ dispatch, fetchUsers }, dispatch)) user3711421
То, что вы предлагаете, не сработает. Вы получите несвязанныйfetchUsers вводится как опора. Сочетание обозначений работает только тогда, когда вы передаете объект в качестве второго аргумента. Когда вы передаете функцию, вы должны вызватьbindActionCreators сам:dispatch => ({ ...bindActionCreators({ fetchUsers }, dispatch), dispatch }). Dan Abramov
263

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

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

// 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 также.

@DanAbramov кстати второй параметр вbindActionCreators(actionCreators, dispatch) необязательный? Я заметил в вашем коде на// es7 spread syntax линия,dispatch не передаетсяbindActionCreators yonasstephen
что внутри метода приращения? Khurshid Ansari
Синтаксис es7 должен бытьfunction mapDispatchToProps(dispatch) { return { ...bindActionCreators({ increment, decrement }), dispatch }; } Black

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