后另一个动作

我有一个异步动作，这从REST API获取数据阵营Redux的调度动作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> 
     ); 
    } 
}

当按钮接着在第一次点击时，它采用异步动作的skip值没有改变。如何在同步后采取行动？

来源

2016-12-30 Denis Bednov

感谢您的答复，但我做了这种方式：

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

来源

2016-12-30 09:43:50

而不是在同步动作后调度一个动作，你可以调用reducer的功能吗？

所以它遵循这一流程：

同步行动呼吁 - >减速通话--->功能的情况下（减速）--->功能的情况下（减速）

代替通常的流动，这可能是为你好：

同步行动呼吁 - >减速通话

按照本指南split the reducers up查看减速器是什么情况。

如果您想分派的动作有副作用，那么正确的方法是使用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 
     }; 
    } 
};

来源

2016-12-30 08:41:03

感谢您的帮助。你能提供一些示例代码吗？（我是一个反应敏捷的人）。 –

@DenisBednov如果你按照thunks指南，thunks应该为你工作。无论如何你都可以将你的减速器分解，就像我在指南中一样，你会知道我在说什么。 –

调度（{类型： 'LIST.SUCCESS'，数据：数据，跳过：同步动作后所需的值}）;

来源

2016-12-30 09:13:37 ryouaki

还检查了这一点redux-sequence-action

来源

2017-01-25 09:34:49 zarehb

，您可以轻松地将它们结合起来。这是一个让动作创作者可以返回一个函数而不是一个动作的中间件。

如果您不需要链接动作创建者并只需要运行它们，那么现在您的解决方案可能对您有用。

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

来源

2017-01-25 12:40:06 pierreg

后另一个动作

回答

相关问题