CODEWITHSUNDEEP
reactjsredux
AG_HIHI
AG_HIHI

Reputation: 1995

Do I have to save every React component state property to the Redux store?

I have read multiple articles on the need to use Redux and have built two fully-functioning React+Redux applications. I have even posted the question on Quora I still cannot have a final answer to my question:
Do I have to save every component state property to the Redux store?

The first project, I have built by following a tutorial where he basically saves everything to the store.
Here's the Github link.
Since I was learning React and Redux, I did not question this approach and went on with it. But, it does seem somewhat unnecessary to save everything to the store
For example, there's an action that saves the comment data to the store:

postActions.js

// Add Comment
export const addComment = (postId, commentData) => dispatch => {
  dispatch(clearErrors());
  axios
    .post(`/api/posts/comment/${postId}`, commentData)
    .then(res =>
      dispatch({
        type: GET_POST,
        payload: res.data
      })
    )
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

And it is called like this:

CommentForm.js

  onSubmit(e) {
    e.preventDefault();

    const { user } = this.props.auth;
    const { postId } = this.props;

    const newComment = {
      text: this.state.text,
      name: user.name,
      avatar: user.avatar
    };

    this.props.addComment(postId, newComment);
    this.setState({ text: '' });
  }

If I were working on my own project, I would've kept the message data stored locally at the component level:

The second project was a personal project, where the only data I saved in the store, is the user account information because I would need it in different components throughout the app to send it in some backend API requests.
All the other components are basically independent or the flow between them does not go beyond two or three components. So I really could not see why I would make myself code all the actions, reducers...etc for all of the components. So I simply pass the props and functions between components in the plain old react way of doing things.

Most of the answers that I found do not go into this specific detail mentioned in my question. All of them talk from a high-level perspective.

Before going ahead and working on other projects, I would like to :

  1. A clear answer to my question
  2. Whether the approach I used for my personal project is okay. In other words, can I use Redux simply for the user account information and for the rest of the components not use it?

I just want to clear this confusion so that when I am using Redux, I am 100% sure, I am using it because I actually need it.

Upvotes: 0

Views: 793

Answers (1)

Callum Hart
Callum Hart

Reputation: 214

Do I have to save every component state property to the Redux store?

Short answer: No you don't.

Longer answer: To quote Dan Abramov on a similar question:

Use React for ephemeral state that doesn't matter to the app globally and doesn't mutate in complex ways. For example, a toggle in some UI element, a form input state.

Use Redux for state that matters globally or is mutated in complex ways. For example, cached users, or a post draft.

There is nothing wrong with the approach taken in your personal project. Redux is great for storing/sharing global application state, such as the user info you describe.

Before putting state into Redux I'd ask:

  1. Will this state be consumed by other components independent to this one?
  2. If the answer to #1 is yes: then ask how often?
  3. If the answer to #2 is frequently: then ask is a single source of truth (the Redux store) the best way to share this particular piece of state? Would other techniques (hooks / render props / higher order components) be more appropriate?

Another quote from Dan in the same linked thread is:

If it gets tedious and frustrating don’t be afraid to put state into the components. My point is that use single state tree unless it is awkward, and only do this when it simplifies things for you rather than complicates them. That’s the only guideline.

The mantra Yagni (You Aren't Gonna Need It) springs to mind.

If you're unsure whether state should be abstracted from a component into Redux, then the chances are it's too early todo so. This helps avoid making design decisions too early, whilst keeping your Redux state lean and intentional (i.e: not convoluted with unnecessary single use concerns).

Ultimately the cost of putting state into Redux needs to pay off.

Upvotes: 1

Related Questions