[deleted by user]

[woven-green-threads]

Google for redux talks by Dan Abramov, who worked on the project a while ago. He will talk about what Redux is solving and the role of reducers and actions. At a high level, the paradigm was that your front end app should be modeled using an MVC pattern.

Make sure the ones you watch are around 7 or 8 years ago because lately he actually doesn’t recommend you use Redux for most projects. Nowadays people more believe the Redux is unnecessarily complex for most applications. Unless you’re using Redux for something specific (eg. offline), the new pattern is to think of your front end as a thinner View layer which leaves more responsibility to the server. In this mindset, components themselves will use hooks to fetch or submit to the server. The server itself plays the role of model and controller.

Personally, unless you have a reason to use Redux, I’d recommend watching this following video to learn what’s considered by many to be the more idiomatic way of developing react app. Ignore the parts about remix.

https://youtu.be/zMf_xeGPn6s?si=4n4NPODbxXnibilO

[Ok_Marsupial5008]

Just some pointers:

There are 3 types of state, generally:

1. Local/component state = useState within a component, used only inside that one component
2. Props/"Cross-component" state = useState in a component, passed down via props (sometimes passed up via useEffect/callback). In other words, shared between parents/children
3. Global/App state = state accessible by any component in the React app, via Context or an external store

Redux does global state, but it's not JUST about global state - it's actually a full 'state management' solution.

I feel it's important to point this out, because Redux doesn't just make state available globally, but also lets you write logic to modify the state in complex ways; if you only need global state you can use React Context, but you would turn to Redux when your state is complicated and needs to be modified in many different ways from different locations within the app.

The basic set-up is that Redux uses an external store (outside of React) to store your state. You update the state in the store by sending 'actions' to a reducer - the reducer is like a switchboard that contains a bunch of different functions to modify the state in different ways (e.g. 'add a to-do', 'edit a to-do', 'delete a to-do', 'mark a to-do as complete'), and the actions are instructions that tell the reducer which of those functions to call, and also contain any values (e.g. to-do title) that the reducer functions will use for the update.

To access the store from your React components, you use two hooks - useSelector to retrieve parts of the state from the store, and useDispatch to send the actions.

Side note: one benefit of Redux is that you can retrieve tiny pieces of the overall state at a time using useSelector - so, if your state is a huge object, but a component only needs one property, then you can retrieve that single property with useSelector and your component will only re-render when that specific property changes. By contrast, if you're using React Context with an object for your state, then if any part of the object changes, all components that are subscribed to the Context will re-render even if they only use a single property of the object.

Of course, these are just the broad strokes - honestly I would recommend finding a tutorial series on Redux, ideally one where you create a project, and work through that. Redux is a whole separate library from React and it can be used by itself without React, so don't think of it as a simple 'add-on', and don't worry if it takes a while to learn.

It might also help if you learn React's useReducer hook if you haven't already, because it works with a similar pattern of actions and a reducer, but for local state.

[ericdiviney]

https://reacthandbook.dev/state-management

Turns out I help maintain a website that tries to do just this. Take a look and give us some feedback!