更好的结构反应方式?

时间:2018-03-21 23:56:12

标签: reactjs redux

我启动了我的应用程序,没有任何状态管理依赖项,我的应用程序状态看起来像这样:

  state = {
    ...initState,
    }

    ///some actions I need to perform
    handleChange = (e) => {
      this.setState(setDefaultValues(e));
      this.setState(setBmr);
      this.setState(setTdee);
      this.setState(setTrainingAndRestDaysCal);
      this.setState(setTrainingMacros);
      this.setState(setRestMacros);
    }

这里我从单独的文件中导入initState(以节省一些空间)。然后我有handleChange我将函数传递给多个this.setState,因为我的下一个状态data取决于之前的状态。我正在从单独的文件中导入这些函数(以节省一些空间)

然后我突然意识到我在各地传递道具,所以我介绍了新的反应context API。在我看来哪个效果很好。有点像没有大样板的redux。所以这个context API通过子组件帮助我prop drilling。要使用上下文API,我必须对我的状态对象进行一些更改,所以它现在看起来像这样:

  state = {
    ...initState,
    handleChange: (e) => {
      this.setState(setDefaultValues(e));
      this.setState(setBmr);
      this.setState(setTdee);
      this.setState(setTrainingAndRestDaysCal);
      this.setState(setTrainingMacros);
      this.setState(setRestMacros);
    },
    setTrainingTrueOrFalse: (isIt) => {
      this.setState({ trainingToday: !isIt })
    },
    saveNewMeal: (meal) => {
      const meals = this.state.meals
      this.setState({
        meals: { ...meals, meal }
      })
    }

我已将handleChange添加到state,因此我可以通过context api传递它。然后我在状态上创建了一些新功能,实现了我的状态现在变得太乱了。

  1. 我在状态(handleChange)上有一个函数,它使用从setStateFunctions.js
  2. 导入的其他函数
  3. 我的功能是逻辑未提取到setStateFunctions.js
  4. 在较高的水平上,我的应用程序有两个主要组件:计算器& MealPlanner

    • 计算器 - 计算宏和卡路里并传递结果 到MealPlanner
    • MealPlanner - 使用来自计算器的数据并制作膳食

    =============================================== ===

    1. 构建应用程序状态和功能的更好方法是什么?
    2. 我真的需要介绍redux吗?
    3. 我的减速器结构是什么?
    4. 这看起来如何只使用新的context API反应?

1 个答案:

答案 0 :(得分:1)

您的应用无需添加redux即可进行状态管理。

1)构建应用程序状态和功能的更好方法是什么?

让顶级应用维护包含" handler"功能

2)我真的需要介绍redux吗?

不需要。保持你的道具井井有条,让应用程序处理"事件"。

3)我的减速器结构是什么?

避免它,并对香草做出反应。

4)这看起来如何使用新的上下文API?

上下文感觉过度刺激并且可能纠缠不清(两个组件可能会偏离对如何使用在上下文中作为共享的全局状态公开的内容的理解)。

让你的作曲App管理状态并将道具传递给子组件(Calculator和MealPlanner)。你想要在这些之间进行双向沟通,所以也要通过"处理"改变App中的状态以通过传入的道具使效果波及另一个的函数。如下所示:

class App extends React.Component {
  state = {
    ...initState, // not sure if this is global or what, but assuming defined
    handleCalculation: () => {
      // do some state changes on this ala this.setState()
    },
    handlePlanning: () => {
    },
  };

  render() {
    return (
      <div>
       <MealPlanner {...this.state} />
       <Calculator {...this.state} />
      </div>
    );
  }
}

让MealPlanner和Calculator设置相应的propTypes。