DEV Community

Cover image for What is Redux?
notHanii
notHanii

Posted on

3

What is Redux?

The principles of Redux are that the state of the application should be stored in a single location, or "store," and that changes to the state should be made using pure functions called "reducers."

To use Redux with a React application, the store and reducers can be integrated into the application using the react-redux library.

The process of integrating Redux into a React application involves creating the store and reducers, and then using the connect function from react-redux to connect the store and reducers to specific components in the React application.

The tutorial covers a variety of topics related to using Redux with React, including how to avoid mutating data structures, how to use the combineReducers function to simplify the process of defining multiple reducers, and how to use the Provider component from react-redux to make the store available to all components in the application.


Summary

  • Intro and 3 Principles of Redux

  • The Reducer and the Store

  • Implementing the Store from Scratch

  • A React Counter Example

  • Avoiding Array Mutations

  • Avoiding Object Mutations

  • Writing a Todo List Reducer

  • Reducer Composition with Arrays

  • Reducer Composition with Objects

  • Reducer Composition with combineReducers

  • Implementing combineReducers() from Scratch

  • Example: Adding a Todo

  • Example: Toggling a Todo

  • Example: Filtering Todos

  • Extracting Presentational Components: Todo and TodoList

  • Extracting Presentational Components: AddTodo, Footer, and FilterLink

  • Extracting Container Components: Filter Link

  • Extracting Container Components: VisibleTodoList and AddTodo

  • Passing the Redux Store Explicitly via Props

  • Passing the Redux Store Explicitly via Context

  • Passing the Store via Provider from react-redux

  • Generating Containers with connect(): VisibleTodoList

  • Generating Containers with connect(): AddTodo

  • Generating Containers with connect(): FooterLink

Take me to the Course

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay