Redux를 사용하여 connect를 사용하여 이 . props에서 간단한 디스패치를 얻는 방법

Redux를 사용하여 connect를 사용하여 이 . props에서 간단한 디스패치를 얻는 방법

접속하는 심플한 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"

connect method가 있는 컴포넌트는 다음과 같습니다.

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

라우터가 redex를 사용하여 어떻게 설정되어 있는지 확인할 필요가 있는 경우

const createStoreWithMiddleware = applyMiddleware(
      thunk
)(createStore);

const store = createStoreWithMiddleware(reducers);

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

갱신하다

connect에서 자신의 디스패치를 생략하면(현재는 fetchUsers를 표시하고 있습니다), 디스패치는 무료가 됩니다(비동기 액션이 없는 셋업이 통상적으로 어떻게 기능하는지는 잘 모르겠습니다).사람들은 섞여서 어울리나요, 아니면 전부인가요, 아니면 아예 없나요?

[map Dispatch To Props]

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

Redx가 제공하는 입력 정보를 저장하기 위해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-unware 컴포넌트 사이의 경계로 기능합니다.이것이 우리가 보통 바운드 액션 크리에이터와 바운드 액션 크리에이터를 모두 투입하는 것이 말이 되지 않는다고 느끼는 이유입니다.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뿐만 아니라.

보통 원하는 대로 믹스 앤 매치할 수 있어요.

합격할 수 있다dispatch소품으로 사용할 수 있습니다.

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

어떻게 된 건지 모르겠어fetchUsers(비동기 기능으로) 사용되고 있습니다만, 통상은 다음과 같은 것을 사용합니다.bindActionCreators디스패치를 자동 갱신할 수 있습니다.그러면 이 기능을 사용하는 것에 대해 걱정할 필요가 없습니다.dispatch이치노

「」를 사용합니다.dispatchdirectory는 멍청한 상태 비저장 컴포넌트와 redux를 결합합니다.휴대성이 떨어질 수 있습니다.

이 할 수 때dispatch의 dispatchToProps하지 않는 것이 store ★★★★★★★★★★★★★★★★★」dispatch컴포넌트내에서 직접 액세스 할 수 있습니다.connect의 connect에 하면 더 것 .dispatchToProps

컴포넌트가 스토어/스토어에 대해 직접 알 필요도, 의존할 필요도 없는 방법으로 "바인드 액션 크리에이터"를 전달하는 방법에 대한 예를 https://stackoverflow.com/a/34455431/2644281에 게재했습니다.

간결하게 말해서 미안해요.추가 정보로 업데이트하겠습니다.

언급URL : https://stackoverflow.com/questions/34458261/how-to-get-simple-dispatch-from-this-props-using-connect-w-redux