CODEWITHSUNDEEP
reactjsredux
karolis2017
karolis2017

Reputation: 2415

Better way to structure react app?

I started my app without any state management dependencies and my app's state looked something like this:

  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);
    }

here I import my initState from separate file (to save some space). Then I have handleChange where I'm passing functions to multiple this.setState because my next state data depends on previous. I'm importing those functions from separate file (to save some space as well)

Then I came to the point where I realized I'm passing props all over the place so I introduced the new react's context API. Which works very well in my opinion. Kind of like a redux just without a big boilerplate. So this context API helped me with that prop drilling through the child components. To use the context API i had to do some changes to my state object, so it looks like this now: 

  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 }
      })
    }

Here I added my handleChange to my state so I can pass it via context api. Then I have created some new functions on the state an realized my state now is getting too messy.

  1. I have a function on the state (handleChange ) that uses other functions imported from setStateFunctions.js
  2. I have functions where logic is not extracted to setStateFunctions.js

On a high level my app has 2 main components: Calculator & MealPlanner

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

  1. What's the better approach to structure my app's state and functions?
  2. Do I really need to introduce redux?
  3. What would be my reducers structure?
  4. How would this look like using just react's new context API?

Upvotes: 0

Views: 154

Answers (1)

Kirk B
Kirk B

Reputation: 71

Your app is sized right to go without adding redux for state management.

1) What's the better approach to structure my app's state and functions?

Let a top-level app maintain state that includes "handler" functions.

2) Do I really need to introduce redux?

Not needed. Keep your props organized and let the App handle the "events".

3) What would be my reducers structure?

Avoid it and go vanilla react.

4) How would this look like using just react's new context API?

Context feels overkill and possibly entangling (two components could drift on the understanding of how to use what is exposed as shared, global state in the context).

Let your composing App manage the state and pass props to the child components (Calculator and MealPlanner). You want two-way communication between those, so also pass "handling" functions that change the state within App to get the effect to ripple to the other via passed-in props. Something like the following:

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>
    );
  }
}

Let MealPlanner and Calculator set required propTypes accordingly.

Upvotes: 1

Related Questions