小编典典

React Native Redux:已调度操作,返回结果

reactjs

在redux中,当调度一个动作时,reducer将相应地更改状态,调用该动作的组件也可以访问该状态(由Provider通过props传递)。我对吗?

状态是访问组件中操作结果的唯一方法吗?(已调用操作的组件)。

如何将回调函数传递给操作,然后使用该方法将结果发送回组件?


阅读 335

收藏
2020-07-22

共1个答案

小编典典

在redux中,当调度一个动作时,reducer将相应地更改状态,调用该动作的组件也可以访问该状态(由Provider通过props传递)。我对吗?

当在redux模式中触发动作时,所有的reducer都会运行,但是只有要对这种动作进行动作的reducer才会在商店上执行reduce工作。有时您可以执行不返回操作类型的操作。如果我想让reducer减少应用程序商店中的状态,通常会返回一个动作对象,否则我就不需要这样做。记住,减少状态时,将重新呈现其值的所有组件。

状态是访问组件中操作结果的唯一方法吗?(已调用操作的组件)。

我认为您可以设计一个动作以在执行后返回结果,但是您不会完全使用redux模式。

如何将回调函数传递给操作,然后使用该方法将结果发送回组件?

我以前从未尝试过,但是我认为Promise是一个不错的选择。我总是使用axios从服务器获取结果,如果我有结果,则派遣另一个axios供reducer更新状态,否则派遣一个reducer进行错误处理。

//actions
const axios from 'axios'
const FETCH_ITEMS = 'FETCH_ITEMS'
const FETCH_ITEMS_RECEIVED = 'FETCH_ITEMS_RECEIVED'
const FETCH_ERROR = 'FETCH_ERROR'
const SERVER_BASE_URL = 'localhost:4000/'

export function itemsReceive(items){
   return {
      type: FETCH_ITEMS_RECEIVED,
      items
    }
}

export function itemsFetchError(){
   return {
      type: FETCH_ERROR,
      errorMsg: 'There was an issue fetching items.'
    }
}

//This function shall dispatch the two actions above in case we have the expected result or an error.
export function fetchItems(){
    return dispatch => {
       axios.get(SERVER_BASE_URL  + 'items').
        then(function(res){
           const { data } = res
             if(data.status === 0){ //data.status is just a status sent by my server to show the response is good.
               const items = data.response
               dispatch(itemsReceive(items))
             }else{
               dispatch(itemsFetchError())
             }
        }).catch(function(err)){//this error here is usually caused by network disruption
              dispatch(itemsFetchError())
        }
    }
}
2020-07-22