Writing

Blog

Writing on system design, React, web performance, and the craft of building software.

1

Connecting Redux to React: Why react-redux Exists

Part 1•3 min read•Redux alone cannot talk to React components. react-redux is the official bridge that connects them. Here's why it exists, how to install it, and the folder structure that scales.

Task Manager: Building the UI Before Redux Arrives

Part 2•9 min read•Before wiring up Redux, build the task manager UI with local React state. The component structure and the collapsible pattern will stay. Redux just replaces the data source.

Action Types and Action Creators in React-Redux

Part 3•3 min read•Define the two task operations as constants, write action creators that return typed action objects, and use the actions/index.js barrel pattern to simplify imports across components.

Writing the Task Reducer with combineReducers

Part 4•3 min read•Write the tasksReducer to handle CREATE_TASK and DELETE_TASK actions, then combine it with combineReducers so the state is accessible as state.tasks in every component.

Creating the Store and Wiring Up Provider

Part 5•3 min read•Create the Redux store with composeWithDevTools, then wrap the React component tree with Provider so every component can access the store without importing it directly.

2

useSelector: Reading Redux State in React Components

Part 1•4 min read•useSelector is the hook that reads from the Redux store and triggers a re-render when that slice of state changes. Learn why it exists and how to use it to render the task list.

useDispatch: Creating and Deleting Tasks with Redux

Part 2•3 min read•useDispatch returns the Redux store's dispatch function. Use it to trigger createTask and deleteTask from the Tasks component, and add a utility function to format dates for display.

Local vs Global State: Search Without Redux

Part 3•2 min read•Not everything belongs in Redux. The task search feature is a perfect example: filter the Redux state locally with useState and never dispatch a search action.

3

Redux Thunk: Async Actions and HTTP Requests

Part 1•4 min read•Redux reducers must be synchronous. Redux Thunk adds middleware that lets action creators return functions, making async operations like HTTP requests possible inside the Redux flow.

Request / Success / Failure: The Async State Pattern

Part 2•3 min read•Every async Redux operation needs three action types: request (loading starts), success (data arrived), failure (error caught). This pattern gives the UI a loading spinner and error message for free.

Axios vs Fetch API in Redux Thunks

Part 3•2 min read•Axios and Fetch are both ways to make HTTP requests in JavaScript. Axios is older and more ergonomic for complex cases. Fetch is built-in and works well for straightforward GET requests.

4

The connect() Function: Redux Before Hooks

Part 1•3 min read•connect() is the React-Redux API used before hooks existed. Real-world projects built before 2017 use it. Understanding it lets you work in older codebases without rewriting everything.

mapDispatchToProps: Cleaner Dispatch with connect()

Part 2•3 min read•mapDispatchToProps is the second argument to connect(). It turns action creator calls into simple functions on props, removing the need to write dispatch(actions.someCreator()) everywhere.

Redux Logger: Logging State Changes in the Console

Part 3•3 min read•redux-logger is a middleware that prints every dispatched action and the resulting state change to the browser console. Configure it to collapse logs, filter by action type, and disable it in production.

Custom Redux Middleware: Intercepting and Transforming Actions

Part 4•3 min read•Custom middleware lets you intercept every dispatched action before it reaches the reducer. Use it to log, validate, transform payloads, or generate IDs without touching component or action creator code.

5

Redux Promise Middleware: Automatic Pending / Fulfilled / Rejected

Part 1•6 min read•redux-promise-middleware removes the boilerplate of manual three-phase dispatch. Pass a Promise as the payload and it auto-dispatches PENDING, FULFILLED, and REJECTED for you.

React-Redux | Writing & Engineering | Durgesh Rai