在另一个动作之后反应 Redux 调度动作
React Redux dispatch action after another action
我有一个 async 操作,它从 REST API:
获取数据
export const list = (top, skip) => dispatch => {
dispatch({ type: 'LIST.REQUEST' });
$.get(API_URL, { top: top, skip: skip })
.done((data, testStatus, jqXHR) => {
dispatch({ type: 'LIST.SUCCESS', data: data });
});
};
一个 sync 动作,改变 skip
状态:
export const setSkip = (skip) => {
return {
type: 'LIST.SET_SKIP',
skip: skip
};
};
top = 10, skip = 0
的初始状态。在组件中:
class List extends Component {
componentDidMount() {
this.list();
}
nextPage() {
let top = this.props.list.top;
let skip = this.props.list.skip;
// After this
this.props.onSetSkip(skip + top);
// Here skip has previous value of 0.
this.list();
// Here skip has new value of 10.
}
list() {
this.props.List(this.props.list.top, this.props.list.skip);
}
render () {
return (
<div>
<table> ... </table>
<button onClick={this.nextPage.bind(this)}>Next</button>
</div>
);
}
}
当第一次点击按钮Next时,使用异步操作的skip
的值没有改变。
我如何在 sync 操作后调度操作?
不在同步操作之后分派操作,您可以只从 reducer 调用该函数吗?
因此它遵循以下流程:
Sync action call --> Reducer call ---> case function (reducer) ---> case function (reducer)
而不是通常的流程,这可能适合您:
Sync action call --> Reducer call
按照本指南split the reducers up 了解什么是 case reducer。
如果您要分派的动作有副作用,那么正确的方法是使用 Thunk,然后您可以在一个动作之后分派一个动作。
Thunks 示例:
export const setSkip = (skip) => {
return (dispatch, getState) => {
dispatch(someFunc());
//Do someFunc first then this action, use getState() for currentState if you want
return {
type: 'LIST.SET_SKIP',
skip: skip
};
}
};
dispatch({ type: 'LIST.SUCCESS', data: data, skip: 同步后你想要的值 });
感谢您的回复,但我是这样做的:
let top = this.props.list.top;
let skip = this.props.list.skip;
let newSkip = skip + top;
this.props.onList(top, newSkip);
this.props.onSetSkip(newSkip);
首先,我计算新的 skip
并使用这个新值分派一个异步操作。然后我发送一个 syns 动作,更新状态 skip
。
如果您使用的是redux thunk,您可以轻松地将它们结合起来。
它是一个中间件,可以让动作创建者 return 一个函数而不是一个动作。
如果您不需要链接动作创建者并且只需要 运行 他们两个,那么您的解决方案现在可能对您有用。
this.props.onList(top, newSkip);
this.props.onSetSkip(newSkip);
如果您需要链接(以同步方式调用它们)或等待第一个分派操作的数据,这就是我的建议。
export function onList(data) {
return (dispatch) => {
dispatch(ONLIST_REQUEST());
return (AsyncAPICall)
.then((response) => {
dispatch(ONLIST_SUCCESS(response.data));
})
.catch((err) => {
console.log(err);
});
};
}
export function setSkip(data) {
return (dispatch) => {
dispatch(SETSKIP_REQUEST());
return (AsyncAPICall(data))
.then((response) => {
dispatch(SETSKIP_SUCCESS(response.data));
})
.catch((err) => {
console.log(err);
});
};
}
export function onListAndSetSkip(dataForOnList) {
return (dispatch) => {
dispatch(onList(dataForOnList)).then((dataAfterOnList) => {
dispatch(setSkip(dataAfterOnList));
});
};
}
我有一个 async 操作,它从 REST API:
获取数据export const list = (top, skip) => dispatch => {
dispatch({ type: 'LIST.REQUEST' });
$.get(API_URL, { top: top, skip: skip })
.done((data, testStatus, jqXHR) => {
dispatch({ type: 'LIST.SUCCESS', data: data });
});
};
一个 sync 动作,改变 skip
状态:
export const setSkip = (skip) => {
return {
type: 'LIST.SET_SKIP',
skip: skip
};
};
top = 10, skip = 0
的初始状态。在组件中:
class List extends Component {
componentDidMount() {
this.list();
}
nextPage() {
let top = this.props.list.top;
let skip = this.props.list.skip;
// After this
this.props.onSetSkip(skip + top);
// Here skip has previous value of 0.
this.list();
// Here skip has new value of 10.
}
list() {
this.props.List(this.props.list.top, this.props.list.skip);
}
render () {
return (
<div>
<table> ... </table>
<button onClick={this.nextPage.bind(this)}>Next</button>
</div>
);
}
}
当第一次点击按钮Next时,使用异步操作的skip
的值没有改变。
我如何在 sync 操作后调度操作?
不在同步操作之后分派操作,您可以只从 reducer 调用该函数吗?
因此它遵循以下流程:
Sync action call --> Reducer call ---> case function (reducer) ---> case function (reducer)
而不是通常的流程,这可能适合您:
Sync action call --> Reducer call
按照本指南split the reducers up 了解什么是 case reducer。
如果您要分派的动作有副作用,那么正确的方法是使用 Thunk,然后您可以在一个动作之后分派一个动作。
Thunks 示例:
export const setSkip = (skip) => {
return (dispatch, getState) => {
dispatch(someFunc());
//Do someFunc first then this action, use getState() for currentState if you want
return {
type: 'LIST.SET_SKIP',
skip: skip
};
}
};
dispatch({ type: 'LIST.SUCCESS', data: data, skip: 同步后你想要的值 });
感谢您的回复,但我是这样做的:
let top = this.props.list.top;
let skip = this.props.list.skip;
let newSkip = skip + top;
this.props.onList(top, newSkip);
this.props.onSetSkip(newSkip);
首先,我计算新的 skip
并使用这个新值分派一个异步操作。然后我发送一个 syns 动作,更新状态 skip
。
如果您使用的是redux thunk,您可以轻松地将它们结合起来。 它是一个中间件,可以让动作创建者 return 一个函数而不是一个动作。
如果您不需要链接动作创建者并且只需要 运行 他们两个,那么您的解决方案现在可能对您有用。
this.props.onList(top, newSkip);
this.props.onSetSkip(newSkip);
如果您需要链接(以同步方式调用它们)或等待第一个分派操作的数据,这就是我的建议。
export function onList(data) {
return (dispatch) => {
dispatch(ONLIST_REQUEST());
return (AsyncAPICall)
.then((response) => {
dispatch(ONLIST_SUCCESS(response.data));
})
.catch((err) => {
console.log(err);
});
};
}
export function setSkip(data) {
return (dispatch) => {
dispatch(SETSKIP_REQUEST());
return (AsyncAPICall(data))
.then((response) => {
dispatch(SETSKIP_SUCCESS(response.data));
})
.catch((err) => {
console.log(err);
});
};
}
export function onListAndSetSkip(dataForOnList) {
return (dispatch) => {
dispatch(onList(dataForOnList)).then((dataAfterOnList) => {
dispatch(setSkip(dataAfterOnList));
});
};
}