DEV Community

loading...
Cover image for Complete Introduction to React-Redux ⚛

Complete Introduction to React-Redux ⚛

KUMAR HARSH
The best way to learn is to teach. Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.
Updated on ・12 min read

React and Redux are often mentioned together and with good reason. As the developer who created Redux was a React developer who wanted to make it easier to share data across different components.

NOTE

Modern Redux has changed a lot so to learn about those please refer to the Official Docs.

I am assuming you have read my previous Blog:

Now that you know how to manage the flow of shared data with Redux, it's time to combine that knowledge with React. In this React-Redux blog, we'll build a React component and learn how to manage the state locally at the component level, and throughout the entire application with Redux.

First, here's a review of some of the key principles of each technology.

react

React is a view library that you provide with data, then it renders the view in an efficient, predictable way.

redux

Redux is a state management framework that you can use to simplify the management of your application's state.

Typically, in a React-Redux app, you create a single Redux store that manages the state of your entire app. Your React components subscribe to only the pieces of data in the store that are relevant to their role. Then, you dispatch actions directly from React components, which then trigger store updates.

Although React components can manage their state locally, when you have a complex app, it's generally better to keep the app state in a single location with Redux. There are exceptions when individual components may have local states specific only to them.

react-redux

Getting Started with React-Redux

Since Redux is not designed to work with React out of the box, we need to use the react-redux package. It provides a way for us to pass Redux state and dispatch to our React components as props.

First, we'll create a simple React component that allows us to input new text messages. These are added to an array that's displayed in the view. Next, we'll create a Redux store and actions that manage the state of the messages array. Finally, we'll use react-redux to connect the Redux store with our component, thereby extracting the local state into the Redux store.

We'll start with a DisplayMessages component. Add a constructor to this component and initialize it with a state that has two properties: input, which's set to an empty string, and messages, which's set to an empty array.

class DisplayMessages extends React.Component {
  constructor(props){
    super(props);
    this.state={
      input:'',
      messages:[]
    }
  }
  render() {
    return <div />
  }
};
Enter fullscreen mode Exit fullscreen mode

Manage State Locally First

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  // add handleChange() and submitMessage() methods here
  handleChange(event){
    this.setState({
      input: event.target.value,
      messages: this.state.messages
    })
  }

  submitMessage(){
    this.setState({
      input: '',
      messages: [...this.state.messages, this.state.input]
    })
  }

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input onChange={this.handleChange.bind(this)} value={this.state.input}/>
        <button onClick={this.submitMessage.bind(this)}>Submit</button>
        <ul>
          {this.state.messages.map((x, i)=>{
            return <li key={i}>{x}</li>
          })}
        </ul>
      </div>
    );
  }
};
Enter fullscreen mode Exit fullscreen mode

The handleChange() method updates the input with what the user is typing. The submitMessage() method concatenates the current message (stored in input) to the messages array in the local state and clears the value of the input.

As we can see the component is managing its state locally.

This is how the app looks like:

1

Extract State Logic to Redux

Now that we finished the React component, we need to move the logic it's performing locally in its state into Redux. This is the first step to connect the simple React app to Redux. The only functionality our app has is to add new messages from the user to an unordered list. The example is simple to demonstrate how React and Redux work together.

First, we'll define an action type ADD. Next, we'll define an action creator addMessage() which creates the action to add a message.

Then we'll create a reducer called messageReducer() that handles the state for the messages. Finally, we'll create a Redux store and pass it the reducer.

// define ADD, addMessage(), messageReducer(), and store here:
const ADD = "ADD";
const addMessage = message => {
  return {
    type: ADD,
    message
  };
};

// Use ES6 default paramter to give the 'previousState' parameter an initial value.
const messageReducer = (previousState = [], action) => {
  // Use switch statement to lay out the reducer logic in response to different action type
  switch (action.type) {
    case ADD:
      // Use ES6 spread operator to return a new array where the new message is added to previousState
      return [...previousState, action.message];
      break;

    default:
      // A default case to fall back on in case if the update to Redux store is not for this specific state.
      return previousState;
  }
};

const store = Redux.createStore(messageReducer);
Enter fullscreen mode Exit fullscreen mode

Use Provider to Connect Redux to React

We have created a Redux store to handle the messages array and created an action for adding new messages. The next step is to provide React access to the Redux store and the actions it needs to dispatch updates. React-Redux provides its react-redux package to help accomplish these tasks.

React-Redux provides a small API with two key features: Provider and connect.

The Provider is a wrapper component from React-Redux that wraps your React app. This wrapper then allows you to access the Redux store and dispatch functions throughout your component tree. The Provider takes two props, the Redux store and the child components of your app.

Defining the Provider for an App component might look like this:

<Provider store={store}>
  <App/>
</Provider>
Enter fullscreen mode Exit fullscreen mode

For our app, we'll create an AppWrapper component, and use this top-level component to render the Provider from react-redux, and pass the Redux store as a prop. Then we'll render the DisplayMessages component as a child.

const Provider = ReactRedux.Provider;

  class AppWrapper extends React.Component {
    render() {
      return (
        <Provider store={store}>
          <DisplayMessages />
        </Provider>
      );
    }
  };
Enter fullscreen mode Exit fullscreen mode

Once we are finished, we should see our React component rendered to the page.

Here is all the code we have written until this point:

// Redux Code:
  const ADD = 'ADD';

  const addMessage = (message) => {
    return {
      type: ADD,
      message
    }
  };

  const messageReducer = (state = [], action) => {
    switch (action.type) {
      case ADD:
        return [
          ...state,
          action.message
        ];
      default:
        return state;
    }
  };



  const store = Redux.createStore(messageReducer);

  // React Code:

  class DisplayMessages extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        input: '',
        messages: []
      }
      this.handleChange = this.handleChange.bind(this);
      this.submitMessage = this.submitMessage.bind(this);
    }
    handleChange(event) {
      this.setState({
        input: event.target.value
      });
    }
    submitMessage() {
      const currentMessage = this.state.input;
      this.setState({
        input: '',
        messages: this.state.messages.concat(currentMessage)
      });
    }
    render() {
      return (
        <div>
          <h2>Type in a new Message:</h2>
          <input
            value={this.state.input}
            onChange={this.handleChange}/><br/>
          <button onClick={this.submitMessage}>Submit</button>
          <ul>
            {this.state.messages.map( (message, idx) => {
                return (
                   <li key={idx}>{message}</li>
                )
              })
            }
          </ul>
        </div>
      );
    }
  };

  const Provider = ReactRedux.Provider;

  class AppWrapper extends React.Component {
    render() {
      return (
        <Provider store={store}>
          <DisplayMessages />
        </Provider>
      );
    }
  };
Enter fullscreen mode Exit fullscreen mode

Map State to Props

The Provider component allows us to provide state and dispatch to our React components, but we must specify exactly what state and actions we want. This way, we make sure that each component only has access to the state it needs.

We accomplish this by creating two functions:

  • mapStateToProps(), and
  • mapDispatchToProps()

In these functions, we declare what pieces of state we want to have access to and which action creators you need to be able to dispatch.

Lets first create the function mapStateToProps(). This function should take state as an argument, then return an object which maps that state to specific property names. These properties will become accessible to our component via props.

const state = [];

const mapStateToProps = (state)=>{
  return {
    messages: state
  }
}
Enter fullscreen mode Exit fullscreen mode

Note: Behind the scenes, React-Redux uses the store.subscribe() method to implement mapStateToProps().

Map Dispatch to Props

The mapDispatchToProps() function is used to provide specific action creators to your React components so they can dispatch actions against the Redux store.

It's similar in structure to the mapStateToProps() function, It returns an object that maps dispatch actions to property names, which become component props. However, instead of returning a piece of state, each property returns a function that calls dispatch with an action creator and any relevant action data.

We have access to this dispatch because it's passed into mapDispatchToProps() as a parameter when we define the function, just like we passed state to mapStateToProps().

Note: Behind the scenes, React-Redux is using Redux's store.dispatch() to conduct these dispatches with mapDispatchToProps(). This is similar to how it uses store.subscribe() for components that are mapped to state.

For example, you have a loginUser() action creator that takes a username as an action payload. The object returned from mapDispatchToProps() for this action creator would look something like:

{
  submitLoginUser: function(username) {
    dispatch(loginUser(username));
  }
}
Enter fullscreen mode Exit fullscreen mode

Here is an example according to our app:

We have an action creator called addMessage(). We'll write the function mapDispatchToProps() that takes dispatch as an argument, then returns an object. The object has a property submitNewMessage set to the dispatch function, which takes a parameter for the new message to add when it dispatches addMessage().

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

const mapDispatchToProps = (dispatch) => {
    return {
        submitNewMessage: (message)=>{
            dispatch(addMessage(message))
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Connect Redux to React

Now that we've written both the mapStateToProps() and the mapDispatchToProps() functions, we can use them to map state and dispatch to the props of one of your React components.

The connect method from React-Redux can handle this task. This method takes two optional arguments, mapStateToProps() and mapDispatchToProps(). They are optional because you may have a component that only needs access to the state but doesn't need to dispatch any actions or vice versa.

To use this method, pass in the functions as arguments, and immediately call the result with your component.

This syntax looks like this:

connect(mapStateToProps, mapDispatchToProps)(MyComponent)
Enter fullscreen mode Exit fullscreen mode

Note: If you want to omit one of the arguments to the connect method, you pass null in its place.

If the syntax of connect confused you, it's called currying in JavaScript.

Currying is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).
Currying doesn’t call a function. It just transforms it.

function outer(){
  return inner
}

function inner(){
 console.log("I got called")
}

outer()()
Enter fullscreen mode Exit fullscreen mode

Lets see the connect method in action, we have the mapStateToProps() and mapDispatchToProps() functions and a new React component called Presentational. We'll connect this component to Redux with the connect method from the React-Redux global object, and call it immediately on the Presentational component.

const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

const mapStateToProps = (state) => {
  return {
    messages: state
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message));
    }
  }
};

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h3>This is a Presentational Component</h3>
  }
};

const connect = ReactRedux.connect;

const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps) (Presentational)
Enter fullscreen mode Exit fullscreen mode

That's it, now you're connected to Redux!

Connect Redux to the Messages App

Now that we understand how to use connect to connect React to Redux, we can apply what we've learned to our React component that handles messages.

We'll rename our React component to Presentational, this term generally refers to React components that are not directly connected to Redux. They are simply responsible for the presentation of UI and do this as a function of the props they receive. By contrast, container components are connected to Redux. These are typically responsible for dispatching actions to the store and often pass store state to child components as props.

We'll see all the code we've written so far. The only change is that the React component is renamed to Presentational, and we'll create a new component held in a constant called Container that uses connect to connect the Presentational component to Redux. Then, in the AppWrapper, we'll render the React-Redux Provider component and pass Provider the Redux store as a prop and render Container as a child.

// Redux:
const ADD = 'ADD';

const addMessage = (message) => {
  return {
    type: ADD,
    message: message
  }
};

const messageReducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [
        ...state,
        action.message
      ];
    default:
      return state;
  }
};

const store = Redux.createStore(messageReducer);

// React:
class Presentational extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  submitMessage() {
    const currentMessage = this.state.input;
    this.setState({
      input: '',
      messages: this.state.messages.concat(currentMessage)
    });
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          value={this.state.input}
          onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>
          {this.state.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};

// React-Redux:
const mapStateToProps = (state) => {
  return { messages: state }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (newMessage) => {
       dispatch(addMessage(newMessage))
    }
  }
};

const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// define the Container component here:
const Container = connect(mapStateToProps,mapDispatchToProps)(Presentational)

class AppWrapper extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Provider store={store}>
        <Container />
      </Provider>
      );
  }
};
Enter fullscreen mode Exit fullscreen mode

Now we will see the messages app rendered to the page again.

Extract Local State into Redux

We wrote all the Redux code so that Redux could control the state management of our React messages app. Now that Redux is connected, you need to extract the state management out of the Presentational component and into Redux. Currently, we have Redux connected, but we are handling the state locally within the Presentational component.

In the Presentational component, first, we'll remove the messages property in the local state. These messages will be managed by Redux. Next, we'll modify the submitMessage() method so that it dispatches submitNewMessage() from this.props, and pass in the current message input from the local state as an argument. Because we removed messages from the local state, we have to remove the messages property from the call to this.setState() here as well. Finally, we'll modify the render() method so that it maps over the messages received from props rather than the state.

// Redux:
const ADD = 'ADD';

const addMessage = (message) => {
  return {
    type: ADD,
    message: message
  }
};

const messageReducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [
        ...state,
        action.message
      ];
    default:
      return state;
  }
};

const store = Redux.createStore(messageReducer);

// React:
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// Change code below this line
class Presentational extends React.Component {
  constructor(props) {
    super(props);

    // Remove property 'messages' from Presentational's local state
    this.state = {
      input: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  submitMessage() {

    // Call 'submitNewMessage', which has been mapped to Presentational's props, with a new message;
    // meanwhile, remove the 'messages' property from the object returned by this.setState().
    this.props.submitNewMessage(this.state.input);
    this.setState({
      input: ''
    });
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          value={this.state.input}
          onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>
           {/* The messages state is mapped to Presentational's props; therefore, when rendering,
               you should access the messages state through props, instead of Presentational's
               local state. */}
          {this.props.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};

const mapStateToProps = (state) => {
  return {messages: state}
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message))
    }
  }
};

const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

class AppWrapper extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Container/>
      </Provider>
    );
  }
};
Enter fullscreen mode Exit fullscreen mode

Once these changes are made, the app will continue to function the same, except Redux manages the state.

2

This example also illustrates how a component may have a local state: our component still tracks user input locally in its state.

We can see how Redux provides a useful state management framework on top of React. We achieved the same result using only React's local state at first, and this is usually possible with simple apps. However, as our apps become larger and more complex, so does our state management, and this is the problem Redux solves.

Congratulations! 🎉

You finished the introduction to React and Redux.

There's one last item worth pointing out, typically, we won't write React apps in a code editor like this. We just saw a glimpse of what the syntax looks like if we're working with npm and a file system on our machine. The code should look similar, except for the use of import statements (these pull in all of the dependencies that are required).

Finally, writing React and Redux code generally requires some configuration. This can get complicated quickly. If you are interested in experimenting on your machine, the Create-React-App comes configured and ready to go.

Alternatively, you can enable Babel as a JavaScript Preprocessor in CodePen, add React and ReactDOM as external JavaScript resources, and work there as well.

That's the basics!

Redux can be used in much more complex ways, but the core is always:

  1. dispatch an action to the store
  2. which may or may not change the state via reducers
  3. access that state via props
  4. and changes will automatically re-render your app

💯

Side Note:

I would like to point out there have been many recent changes in React and Redux which allow us to write lesser code and reduce the complexity as well, but according to me it is important to know about these concepts also for 2 reasons:

  • It will help you understand older codebases.
  • Once you realize the complexities we have with these methods, then you would appreciate the tools which solve these issues more.

If you liked my content consider following me on Twitter

Also if you got any questions feel free to ping me on Twitter.

I hope you found this article valuable. If yes do let me know in the comments 😊

Do you use Redux or something else ?, do let me know in the comments.

This article was inspired by freecodecamp curriculum.

Thank You!

Discussion (29)

Collapse
markerikson profile image
Mark Erikson

Hi, I'm a Redux maintainer.

I wrote a comment on your last Redux tutorial post saying that unfortunately the patterns shown in that post are very out of date, and that today we teach simpler Redux usage patterns that are easier to learn. In particular, we teach Redux Toolkit as the default way to use Redux, but even if you are learning the basics of writing Redux code by hand, we now teach those same ideas in simpler ways.

I hate to keep saying this, but the patterns shown in this tutorial post are also very outdated and not how we want people learning or using React-Redux today.

There's several issues here.

First, the actual Redux logic shown (reducers, etc) is still being written "by hand" instead of using Redux Toolkit.

Beyond that, though, we now teach very different patterns for using React-Redux.

The "container/presentational component" concept is still valid, and it's a thing that you can do if you want to. But, the React community has moved away from that approach, in part due to the arrival of React Hooks. I talked about this change in a blog post and conference talk:

The original Redux tutorials did previously teach the "container/presentational" concept in the "Basics > React" tutorial page.

However, when I rewrote our tutorials last year, I completely removed any mentions of the "container/presentational" pattern from our docs.

In addition, we now recommend the React-Redux hooks API as the default approach for use in your React components, and we teach the hooks API as the right approach in our tutorials:

Again, I appreciate that you took the time to write these tutorials.

But, please update these tutorials to match how we recommend using Redux today!

Collapse
latobibor profile image
András Tóth

I never really liked redux with its faux functional programming attempt in a language that does not support it (neither it does OOP anyway). It had always unnecessary layers to create and maintain and obfuscate. Redux Toolkit is a step in the right direction, however OvermindJS is already many steps ahead:
overmindjs.org/

It also works out of the box with TypeScript (after a little configuration).

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

I will check overmind.js out.

Thread Thread
latobibor profile image
András Tóth

It is going to be eye-opening. Especially if you compare working with classes. Immutability is implemented through the new Proxy feature of JS, so you can write state.something = 'stuff' without doing state = { ...state, something: 'stuff' } (just as with redux-toolkit).

Thread Thread
cenacr007_harsh profile image
KUMAR HARSH Author

Currently working on Redux toolkit, will soon check out overmind for sure.

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author • Edited

Thanks for taking out the time to comment again but I am writing a series of blogs which will gradually move to modern practices so don't worry I will soon be writing a blog with modern react practices and how redux is easy-to-use now, and I mentioned this in the blog as well why I wrote this blog, because people need to know this to understand older code bases and I believe when we firsthand realize the complexity of something then we appreciate the tools that solve those complexities for us so much more.

Thanks for providing some extra tips as well, I will surely add those links in my future blogs so that everyone can stay upto date with the modern practices.

Collapse
markerikson profile image
Mark Erikson

I get what you're saying, but I disagree with the approach.

It's possible to teach the basics, and yet also be very clear up front that "this is to help you understand how it works, but not how you should write it in the real world". It's also possible to teach those basics in a friendlier way than the original old-style approaches. I know, because this is what I did in that "Redux Fundamentals" tutorial.

The problem is that neither of these two posts so far have had any indication that "the patterns that are shown here are actually out of date", or that "later articles will show more modern approaches". And, by spending so much time on these outdated patterns, you're doing readers a disservice going forward.

Thread Thread
cenacr007_harsh profile image
KUMAR HARSH Author

Sorry to say this but I don't think I have any right to say " you shouldn't be writing this way', these 2 blogs are a sum up of the entire freecodecamp curriculum from where I have learnt and thousands are also learning everyday, if they have not updated their curriculum and they are supposed to be one of the largest developers community, then what can I do. I am no react or redux expert in any way, I am a beginner who is learning and sharing his journey and that is it, and freecodecamp is a big thing, it's not like I followed an outdated Udemy course and sharing old things, although I agree with you that modern practices will benefit us more, but saying it's a disservice to my readers is a bit harsh because this is what I have learnt from freecodecamp and countless others are also learning from there everyday.

Anyways I will keep your suggestions in mind going forward and try to learn the new ways of doing things soon and share them with others.

Thank You!

Thread Thread
phryneas profile image
Lenz Weber

Honestly, you are not writing these articles from a beginner's perspective. You are not titling them "This is what I learned at FreeCodeCamp today", but you are titling them "Complete Introduction to React-Redux".
You are writing them from an educator's perspective and other people will try to learn from them. And that comes with responsibiliy. It's bad enough that FreeCodeCamp is showing two years outdated practices, but it gets even worse when more tutorials with a current date do the same.
As an instrcuctor, you should validate your sources and do your due diligence.
And it can't be too much to expect that in that teacher role you go to the official React-Redux docs and at least read through the "Getting Started" introduction before publishing a post like this.
And if you do that, you will notice that the only code the React-Redux "getting started" page and this blog post share is the Provider wrapper.

Thread Thread
markerikson profile image
Mark Erikson

Unfortunately, FreeCodeCamp's curriculum is also outdated :( I've talked with the FCC folks, and they have plans to redo and update the curriculum, but no idea when that will happen.

For that matter, most Redux tutorials on the internet are outdated at this point. I get that many people prefer learning from courses and blog posts rather than looking at official docs, but this is part of the downside - there's no guarantee that whatever course someone's looking at has actually been kept up to date with changes in that tool.

In this case, as I said, we've drastically changed how we recommend that people learn and use Redux. There are a few courses and tutorials that show the right patterns - for example, freecodecamp.org/news/redux-for-be... is pretty good . But, most courses on Redux have not been updated.

This is why it's important to actually look at official docs as well. As I mentioned earlier, we rewrote our tutorials from scratch last year to teach these newer patterns, and reading through those will show you the differences.

So, I apologize if I came across harshly, but A) I don't know your skill level, B) the patterns in these posts aren't how we want people learning Redux, and C) I'm having to respond to many other similar posts and tutorials as well that are not up to date.

Thread Thread
cenacr007_harsh profile image
KUMAR HARSH Author • Edited

I understand your point, I already had a side note in the original blog post and I now will add a disclaimer at the top and a link to the official documentation as well. Thank You!

Thread Thread
cenacr007_harsh profile image
KUMAR HARSH Author

I am a beginner so it never really occured to me freecodecamp curriculum could be so heavily outdated. In the developer world there are new things coming out everyday but as it has been pointed out to me, it's not about new practices but the whole setup of Redux has been changed drastically. I will add a disclaimer and a link to the original docs as well in the blog.

Collapse
swashata profile image
Swashata Ghosh • Edited

While the information in this tutorial is severely outdated, I really appreciate your effort. Especially I believe that writing tutorials on things you've just learnt helps you really master the concepts. Keep it up kumar.

Also if possible try to add a disclaimer on top of the post saying that it is outdated and not recommended anymore. Others might find it useful.

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

I was actually wondering if this is so outdated then why is freecodecamp keeping this curriculum around ??? 🤔

Collapse
swashata profile image
Swashata Ghosh

You are right about that. But then again freecodecamp is community driven, so it just needs to be updated. The reason I say it's outdated because (as you've felt the same way), there's a lot of boilerplate code which aren't needed anymore because of the awesome stuff done by both react and redux community. Try writing the same application using the guides from redux toolkit and you will see.

Thread Thread
cenacr007_harsh profile image
KUMAR HARSH Author

Yes I am currently working on that.

Collapse
nasimuddin profile image
Nasim Uddin

Redux?
Just use zustand that isn't isn't boilerplatey or opinionated.
For data fetching use swr.
That's my way to go. You might not like this but that's completely fine!

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

I'm new now, will definitely check out other options as well, as I progress.

Collapse
rohitk570 profile image
ROHIT KUMAR

Now its perfectly explained 🙌🙌

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks.

Collapse
rash123 profile image
RASHMI VERMA

Best

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks.

Collapse
vivekku36049297 profile image
Vivek kumar singh

Motivation for new users

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

😊

Collapse
mvoloskov profile image
Miloslav 🏳️‍🌈 🦋 Voloskov

What's your opinion on Redux vs useReducer + optional useContext in different situations?

Collapse
shyam2794 profile image
shyam • Edited

Redux
It is best suited if your app is huge and you have many components which might need to access the store .

Context
redux will be an overkill if you have a small app where you want to pass data say for 2 level nested components . In this case use Context API which is much more simpler.

useReducer
when you have a component state which gets updated on different actions for example add row, delete row , update row etc . So that it is clear which action is causing the state update .

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

It's all new for me, so I don't think I can say much about them right now.

Collapse
ceoshikhar profile image
Shikhar Sharma

In my humble opinion, what this post teaches is out of date and not today's react development best practice.

PS - Don't start a debate.

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Already added that point in the disclaimer 😊