Question

我正在将我的reactJs应用程序迁移到redux / mobx。现在，我有3个组件，每个组件在其状态下均具有以下结构：

name:string,
surname:string,
showError: boolean,
loading:boolean

如您所见，将名称/姓氏移动到集中式存储库以保持全局状态是有意义的。我对showError和loading不太确定：它们是布尔型，用于在特定组件内部显示错误消息和微调框。

我个人不喜欢将“与UI相关的状态”置于集中状态的想法，我想使其保留在特定组件内部，因为其他组件将永远不需要访问/更新这样的东西。

所以我的想法如下：

this.state = {showError, loading};
this.businessState = props.state;

简而言之，我将继续使用React的setState（）函数更新“状态”，同时将所谓的“业务状态”的管理留给redux / mobx。

这是一种好习惯还是我做的特别不好？

Answer 1

我个人对此没有问题，因为“加载”和“ showError”与状态有关，而不与UI组件有关。基本上是说，当我从API调用中填充状态时，是否已经完成，并且发生了任何错误？ UI组件将相应显示。

我会根据从BE系统抛出的错误的结构，将showError设为字符串或string []。

我还将把您的状态分解为特定的化简器，这些化简器处理特定的业务功能并根据特定的业务功能加载状态，而不是按页面上的每个组件加载。

我希望这会有所帮助。

Answer 2

我个人建议大多数情况下store使用components，根据我的经验，大多数stores实际上是ViewStore's。如果您在多个loading上有类似errors和components的逻辑，那么执行以下操作甚至会更加容易：

class BaseViewStore {
    @observable loading = false
    @observable showError = false
}

然后您的component store会扩展此store，并且您将在此base store中拥有可重用的逻辑。当然，component的所有特定内容都将归入特定的store。这样，您的components会很干净，没有personal state（本身在component之内），并且很容易用其他组件替换，因为您的行为（状态）将在{{1}中}。

Answer 3

我不确定这是否是最佳做法。但是，当您执行一些异步操作（例如从API获取数据）时，就会使用加载状态。获取此类数据的最佳实践是通过行动来完成。而且我通常在该操作内部执行的操作是，在调用API之前分派加载状态，并分派一个reducer，在获取数据后将其设置为false。

所以，我认为。我会将加载状态存储在redux中，而不是使用组件状态。

会是这样

action.js

getData = () => {
   return (dispatch) => {
      dispatch({ type: LOADING });
      callApiToGetData()
         .then(data => {
            dispatch({ type: SUCCESS, data })
         })
         .catch(e => {
            dispatch({ type: ERROR, error: e })
         })
   }
}

reducer.js

const initialState = {
  data: null,
  loading: false,
  error: null
}

function reducer(state = initialState, action) {
  switch (action.type) {
    case LOADING:
       return { ...state, loading: true }
    case SUCCESS:
       return { ...state, loading: false, data: action.data, error: null }  
    case FAIL:
       return { ...state, loading: false, error: action.error }
    default:  
       return state
}

将强ui相关状态保持在react组件内部是否是错误的做法？

3 个答案: