환원기 사가의 구성 요소에서 환원기 상태 변경 청취

환원기 사가의 구성 요소에서 환원기 상태 변경 청취

반응 어플리케이션에 Redex-saga를 사용하고 있다.나는 부품에 주문 목록과 디스플레이를 가져와야 한다.나는 같은 이유로 액션과 환원기, 그리고 이야기를 만들어냈다.

나는 사극에서 API를 치고 있다.

사가

import { call, put } from "redux-saga/effects";
import { path } from "ramda";
import OrdersActions from "../Redux/OrdersRedux";
export function* getOrders(api, action) {
  const { header } = action;
  console.log("order header", action);
  // make the call to the api
  const response = yield call(api.getOrders, header);
  console.log(response);
  if (response.ok) {
    yield put(OrdersActions.success(response.data));
    // do data conversion here if needed
  } else {
    yield put(OrdersActions.failure());
  }
}

환원기

import { createReducer, createActions } from 'reduxsauce'
import Immutable from 'seamless-immutable'

/* ------------- Types and Action Creators ------------- */

const { Types, Creators } = createActions({
  getOrders: ['header'],
  success: ["data"],
  failure: [],
})

export const OrderTypes = Types
export default Creators

/* ------------- Initial State ------------- */

export const INITIAL_STATE = Immutable({
  new_orders: [],
  fetching: null,
  error: null,
})

/* ------------- Reducers ------------- */

// request the avatar for a user

export const getOrdersRequest = (state) =>
  state.merge({ fetching: true })

// successful avatar lookup
export const success = (state, action) => {
  const { data } = action;
  return state.merge({ fetching: false, error: null, new_orders: data.data.new_orders })
}

// failed to get the avatar
export const failure = (state) =>
  state.merge({ fetching: false, error: true })


/* ------------- Hookup Reducers To Types ------------- */

export const reducer = createReducer(INITIAL_STATE, {
  [Types.GET_ORDERS]: getOrdersRequest,
  [Types.SUCCESS]: success,
  [Types.failure]: failure,
})

MyComponent.js

class OrdersScreen extends Component {
  static navigationOptions = getHeaderStyle("Orders");

  constructor(props) {
    super(props);
    this.state = {
      new_orders: this.props.order_details.new_orders
    }
  }


  componentWillMount() {
    this.props.getOrders(this.getHeader());
  }


  componentWillReceiveProps(newProps, props) {
    if (newProps.order_details.new_orders.length > 0) {
      this.setState({
        new_orders: newProps.order_details.new_orders
      })
    }
  }

  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'column', justifyContent: "flex-start" }}>
        <View style={{ padding: 10, flexDirection: 'row' }}>
          <Text style={{ flex: 3 }}>Order</Text>
        </View >
        {
            this.state.new_orders.map((item)=>{
                return<div>{item.order_id}</div>
            })
        }
        <View>
          <Button label="Make Payment" onPress={this.onMakePaymentClick()} />
        </View >
      </View>
    )
  }

  getHeader() {
    const { session_id } = this.props;
    return { "x-session-id": session_id };
  }

  onMakePaymentClick = () => {
    this.props.submitOrders();
  }
}


const mapStateToProps = (state, ownProps) => {
  return {
    order_details: state.order_details,
  }
}



const mapDispatchToProps = (dispatch) => ({
  getOrders: (header) => dispatch(OrdersActions.getOrders(header)),
})

export default connect(mapStateToProps, mapDispatchToProps)(OrdersScreen)

내 질문은 그 값이 저장소에서 변경되고 그 변경된 값을 얻을 수 있는 다른 방법이 있다는 것이다.

나는 새로운 매장 변경을 위해 컴포넌트WillReceiveProps 메소드를 사용하고 있다.

이제 다른 액션 "MakePayment"를 보내고 다른 api를 치고 반응이 괜찮으면 화면을 바꿔서 에러 메세지를 보여주고 싶다.

보시다시피 나는 컴포넌트WillReceiveProps에서 new_order를 설정하고 있다. 만약 내가 "MakePayment" 액션을 발송하면, 컴포넌트WilReceiveProps에 다시 연락하고 주문이 다시 렌더링된다.

어떻게 하면 이것을 피할 수 있을까?그리고 변경된 스토어 및 가치의 변화를 들을 수 있는 다른 구성요소가 있는가?

먼저 구성 요소DidMount에서 작업을 전송하십시오.구성 요소WillMount 문서에는 그 이유가 설명되어 있다.

둘째, 사용할 필요가 없다.componentWillReceiveProps단지 파견만 하기 때문에 변경사항을 수신하기 위해getOrders한 번. 데이터가 바로 당신의 데이터로 넘어가고 있다.new_orders소품. 정말이지, 넌 단지 그 일에만 신경 쓰니까.new_orders이것을 직접 소품으로 삼아야 한다.구성 요소가 다음에서 변경된 사항을 직접 관찰하는 방법new_orders.

마지막으로, 'Make_Payment' 액션을 호출하면 결제 데이터가 소품이나 상태에 있지 않기 때문에 리렌더가 발생하지 않는다.소품 속에 데이터가 들어 있을 때는 정말 정당한 이유가 없는 한 그것을 상태로 넘길 필요가 없다는 것을 기억하라.

참조URL: https://stackoverflow.com/questions/46360296/listen-to-reducer-state-change-in-component-in-redux-saga