5
Tôi vẫn còn tương đối mới đối với React/Redux nên xin lỗi nếu đây là một câu hỏi đơn giản nhưng tôi vẫn chưa tìm được giải pháp.Trạng thái React/Redux trống trong lần gọi hành động thứ hai
Tôi có một hai hành động:
// DESTINATIONS
// ==============================================
export const DESTINATION_REQUEST = 'DESTINATION_REQUEST';
export const DESTINATION_SUCCESS = 'DESTINATION_SUCCESS';
export const DESTINATION_FAILURE = 'DESTINATION_FAILURE';
export function loadDestination (params, query) {
const state = params.state ? `/${params.state}` : '';
const region = params.region ? `/${params.region}` : '';
const area = params.area ? `/${params.area}` : '';
return (dispatch) => {
return api('location', {url: `/accommodation${state}${region}${area}`}).then((response) => {
const destination = formatDestinationData(response);
dispatch({
type: DESTINATION_SUCCESS,
destination
});
});
};
}
// PROPERTIES
// ==============================================
export const PROPERTIES_REQUEST = 'PROPERTIES_REQUEST';
export const PROPERTIES_SUCCESS = 'PROPERTIES_SUCCESS';
export const PROPERTIES_FAILURE = 'PROPERTIES_FAILURE';
export function loadProperties (params, query, rows = 24) {
return (dispatch, getState) => {
console.log(getState());
return api('search', {locationId: xxxxxx, rows: rows}).then((response) => {
const properties = response.results.map(formatPropertiesData);
dispatch({
type: PROPERTIES_SUCCESS,
properties
});
});
};
}
chúng được kết hợp với gia giảm tương đối của chúng:
// DESTINATIONS REDUCERS
// ==============================================
export default function destination (state = [], action) {
switch (action.type) {
case DESTINATION_SUCCESS:
return action.destination;
default:
return state;
}
}
// PROPERTIES REDUCERS
// ==============================================
export default function properties (state = [], action) {
switch (action.type) {
case PROPERTIES_SUCCESS:
return action.properties;
default:
return state;
}
}
và chúng được gọi là từ bên trong một thành phần (connectDataFetchers vòng qua các hành động gọi và trả về họ thành phần cho hiển thị bên máy chủ):
// PROPTYPES
// ==============================================
Search.propTypes = {
destination: PropTypes.object.isRequired,
properties: PropTypes.array.isRequired
};
// ACTIONS
// ==============================================
function mapStateToProps ({destination, properties}) {
return {destination, properties};
}
// CONNECT & EXPORT
// ==============================================
export default connect(mapStateToProps)(
connectDataFetchers(Search, [loadDestination, loadProperties])
);export default function connectDataFetchers (Component, actionCreators) {
return class DataFetchersWrapper extends React.Component {
static propTypes = {
dispatch: React.PropTypes.func.isRequired,
location: React.PropTypes.object.isRequired,
params: React.PropTypes.object.isRequired
};
static fetchData (dispatch, params = {}, query = {}) {
return Promise.all(
actionCreators.map((actionCreator) => dispatch(actionCreator(params, query)))
);
}
componentDidMount() {
DataFetchersWrapper.fetchData(
this.props.dispatch,
this.props.params,
this.props.location.query
);
}
render() {
return (
<Component {...this.props} />
);
}
};
}tôi cần để chạy các hành động đầu tiên (loadDestination) mà sẽ trả về một ID sau đó cần phải rồi gửi cho action giây để tải các thuộc tính với vị trí đó ID.
Nếu tôi mã hóa vị tríID, điều này hoạt động tốt, nhưng nếu tôi cố gắng truy cập vào trạng thái ở loadProperties qua getState() thì trả về { destination: [], properties: [] }.
Có cách nào để truy cập giá trị từ hành động đầu tiên qua tiểu bang không?
SOLUTION
Managed để có được điều này để làm việc sau khi gợi ý từ @ pierrepinard_2
Tôi tạo ra một hành động mới mà công văn hai hành động khác theo thứ tự tôi cần:
// SEARCH
// ==============================================
export function loadSearch (params, query) {
return (dispatch) => {
return dispatch(
loadDestination(params, query)
).then(() => {
return dispatch(
loadProperties(params, query)
)
})
}
}
// DESTINATIONS
// ==============================================
export const DESTINATION_REQUEST = 'DESTINATION_REQUEST';
export const DESTINATION_SUCCESS = 'DESTINATION_SUCCESS';
export const DESTINATION_FAILURE = 'DESTINATION_FAILURE';
export function loadDestination (params, query) {
const state = params.state ? `/${params.state}` : '';
const region = params.region ? `/${params.region}` : '';
const area = params.area ? `/${params.area}` : '';
return (dispatch) => {
return api('location', {url: `/accommodation${state}${region}${area}`}).then((response) => {
const destination = formatDestinationData(response);
dispatch({
type: DESTINATION_SUCCESS,
destination
});
});
};
}
// PROPERTIES
// ==============================================
export const PROPERTIES_REQUEST = 'PROPERTIES_REQUEST';
export const PROPERTIES_SUCCESS = 'PROPERTIES_SUCCESS';
export const PROPERTIES_FAILURE = 'PROPERTIES_FAILURE';
export function loadProperties (params, query, rows = 24) {
return (dispatch, getState) => {
return api('search', {locationId: getState().destination.id, rows: rows}).then((response) => {
const properties = response.results.map(formatPropertiesData);
dispatch({
type: PROPERTIES_SUCCESS,
properties
});
});
};
}sau đó trong thành phần tôi chỉ yêu cầu một hành động:
export default connect(mapStateToProps)(
connectDataFetchers(Search, [loadSearch])
);
Bạn có thể chia sẻ cách cuộc gọi tảiĐăng ký & loadProperties? –
@DamienLeroux - Tôi đã thêm một số mã khác từ thành phần tìm kiếm cộng với hàm 'connectDataFetchers' – Paul