SamwithCode

Connect React with Redux 2025

Connect React with Redux 2025

To connect React with Redux in 2025, we use the official react-redux library. It allows React components to interact with the Redux store using hooks like useSelector and useDispatch.

1. Install Redux and React-Redux

npm install redux react-redux

2. Create Redux Store

// store.js
import { createStore } from 'redux';

const initialState = {
  count: 0,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);
export default store;

3. Provide Store to React App

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);

4. Connect Components with Redux

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    

      
Count: {count}

      

        
        
      

    

  );
};

export default Counter;

✅ Summary

  • createStore() to create the Redux store
  • to give access to the store
  • useSelector() to read state
  • useDispatch() to dispatch actions

Now your React app is connected with Redux using the latest practices in 2025! 🎯