动作完成后执行函数 [英] Executing a function after the action finished its working

问题描述

大家好，今天开始使用 Redux，因此正在构建一个非常基本的递增/递减数字项目，单击递增/递减"按钮.这是它的一个小代码！请看一看

动作创建器文件

export const increment=(num)=>{返回 {类型:'增量'，有效载荷:数量}}

减速器文件

const change=(change=0,action)=>{if(action.type==='增量'){返回 action.payload+1}退换货}导出默认的 combineReducers({改变})

Increment.js

class Increment extends Component {使成为() {控制台日志(this.props.ans)返回 (<div><button onClick={()=>{this.props.increment(this.props.ans)}}>Increment</button>

)}}const mapstatetoprops=(状态)=>{返回 {ans:state.change}}导出默认连接(mapstatetoprops，{增量})(增量)

现在我面临的问题是在 Increment.js 中点击按钮 Increment 时执行两个函数

第一个

this.props.increment(this.props.ans)//它调用动作创建器并改变状态

第二个

this.props.in(this.props.ans)//这是对父组件的回调，因为我想将值从 Increment/Decrement.js 传递给 app.js，然后将其渲染到屏幕

所以我的 App.js 看起来像

const App=(props)=>{控制台日志(道具)返回 (<div><增量/><递减/>计数:{props.ans}

);}const mapstatetoprops=(状态)=>{控制台日志(状态)返回 {ans:state.change}}导出默认连接(mapstatetoprops)(应用程序)；

现在如果我 console.log(val) 在 App.js 和 console.log(this.props.ans) 在 Increment.js 文件我发现如果我的原始值是 0 所以 Increment.js 中的 this.props.ans 给我 1 但在 App.js this.val 仍然给我 0..so 在操作更新我正在 App 中接收值的状态之前.js.如何在操作成功更新状态后运行并更新 App.js?

解决方案

你的动作的运行流程是:

• this.props.increment(this.props.ands) 运行，此时this.props.ans为0
• this.props.in(this.props.ans) 立即运行并在您的 App.js 中打印 0
• 状态改变并重新渲染增量组件
• console.log(this.props.ands)(在 render 函数中)运行.

要获得您想要的行为，您可以在 componentDidUpdate 生命周期方法中调用您的 in 回调函数.

componentDidUpdate(prevProps) {this.props.in(this.props.ans);}

Hey guys started out Redux today so was building a very basic Project of Incrementing/Decrementing the number on clicking the Increment/Decrement button. Here is a small code for it !Please have a look

Actions-creater file

export const increment=(num)=>{
    return {
        type:'increment',
        payload:num
    }
}

reducers file

const change=(change=0,action)=>{
    if(action.type==='increment'){
        return action.payload+1
    }
    return change
}
export default combineReducers({
    change
})

Increment.js

class Increment extends Component {
    render() {

        console.log(this.props.ans)
        return (
            <div>
            <button onClick={()=>{this.props.increment(this.props.ans)}}>Increment</button>
            </div>
        )
    }
}
const mapstatetoprops=(state)=>{
    return {ans:state.change}
}
export default connect(mapstatetoprops,{increment}) (Increment)

Now the issue I am facing is that in Increment.js on clicking the button Increment two functions get executed

First one

this.props.increment(this.props.ans)
//which calls the action creater and changes the state

Second one

this.props.in(this.props.ans)
//which is a callback to the parent component as i want to pass the value to app.js from both Increment/Decrement.js and then render it to screen

So my App.js looks like

const App=(props)=>{
console.log(props)
  return (
    <div>
     <Increment />
     <Decrement/>
   Count: {props.ans}
    </div>
  );
  }

const mapstatetoprops=(state)=>{
console.log(state)
return {ans:state.change}
}

export default connect(mapstatetoprops) (App);

Now if i console.log(val) in App.js and console.log(this.props.ans) in Increment.js file i find that if my original value is 0 so this.props.ans in Increment.js gives me 1 but in App.js this.val still gives me 0..so before the action updates the state i am receving value in App.js. How can i make that run and update App.js after action succesfully updates the state ?

解决方案

The running flow of your action is:

• this.props.increment(this.props.ands) runs, at this point, this.props.ans is 0
• this.props.in(this.props.ans) runs right after and print 0 in your App.js
• The state changed and Increment Component re-rendered
• console.log(this.props.ands) (in render function) runs.

To have the behavior as you want, you can call your in callback function inside the componentDidUpdate life cycle method.

componentDidUpdate(prevProps) {
  this.props.in(this.props.ans);
}

这篇关于动作完成后执行函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！