在動作助手中使用browserhostory.push是一個好主意嗎？

在我的React應用程序中，我需要根據從服務器接收到的數據做出決定。在動作助手中使用browserhostory.push是一個好主意嗎？

如果數據預計（Dispatch actions to update state）
如果數據有錯誤的標籤（browserhistory.push('/notfound');）
如果預期的數據是無法解析（browserhistory.push('/error');）

在我的應用程序的結構，我使用Redux，React-Router和React-redux-Router庫，但沒有中間件。我已經讓actionHelpers進行ajax調用，然後使用Action Creator發送適當的操作。這些actionHelper方法暴露在組件中以更改狀態。我的問題：

什麼是處理這些情況的最佳方法？
是actionHelper作出這些決定的最佳地點？

我現在不想使用任何中間件，但請讓我知道如果使用中間件來處理這些情況是個好主意。

來源

2016-08-12 Anil Sharma

當你說要改變狀態你是指redux狀態或組件狀態？ actionHelpers只是使ajax調用的方法？ – Pachu

如果您已經使用'react-router-redux'，則可以使用它提供的'push'，這樣您的代碼就會看起來更乾淨。 – xiaofan2406

@Pachu，是動作助手只是函數，我只是在更新動作派發時的redux狀態 –

操作不是應該執行重定向的地方。此行爲應該在組件本身中實現，並且應該執行操作來更新商店。

您可能需要使用Redux-thunk middleware在這裏，讓你派遣一個函數（其接收dispatch作爲參數，而不是對象的動作。然後，您可以換行功能的承諾，並在componentWillMount使用它。

在你的行動文件：

updateReduxStore(data) { 
    return { 
     type: SOME_TYPE, 
     payload: data.something 
    }; 
} 

fetchAndValidateData() { 
    ... 
} 

checkData() { 
    return function(dispatch) { 
     return new Promise((resolve, reject) => { 
      fetchAndValidateData().then((data) => { 
       try { 
        if (JSON.parse(data).length > 0) { 
         dispatch(updateReduxStore(data)); 
         resolve('valid data'); 
        } else if (data.error) { 
         reject('error in data'); 
        } 
       } 
       catch(err) { 
        reject('malformed data'); 
       } 
      }); 
     }); 
    }; 
}

然後在您的組件：

componentWillMount() { 
    this.props.checkData() 
     .then((message) => { 
      console.log(message); //valid data 
     }) 
     .catch((err) => { 
      if (err === 'error in data') { 
       browserHistory.push('/notfound'); 
      } else if (err === 'malformed data') { 
       browserHistory.push('/error'); 
      } 
     }); 
}

Redux-thunk中間件用於這種用例。

來源

2016-08-12 07:30:56

在動作助手中使用browserhostory.push是一個好主意嗎？

回答

相關問題