How to use redux and how it works with react with example

Redux is a predictable state container for JavaScript applications. It is commonly used with React to manage the application state and make state changes more manageable and predictable. Redux follows a unidirectional data flow pattern and provides a centralized store to hold the state of the application.

Here's an overview of how Redux works with an example:

Store: The Redux store is a single JavaScript object that holds the state of the entire application. The store is created using the createStore() function from the Redux library.

Actions: Actions are plain JavaScript objects that describe the type of state change in the application. They are dispatched using the store.dispatch() method. Actions must have a type property and can contain additional data.

Example: 

?

1 2 3 4 5 6	// Action to increment a counter const incrementCounter = () => {   return {     type: 'INCREMENT_COUNTER'   }; };

// Action to increment a counter
const incrementCounter = () => {
  return {
    type: 'INCREMENT_COUNTER'
  };
};

Reducers: Reducers are pure functions that define how the application state changes in response to actions. They take the current state and an action as input and return a new state based on the action type. Reducers should not mutate the existing state but instead create a new copy.

Example:

?

1 2 3 4 5 6 7 8 9	// Reducer to handle the counter state const counterReducer = (state = 0, action) => {   switch (action.type) {     case 'INCREMENT_COUNTER':       return state + 1;     default:       return state;   } };

// Reducer to handle the counter state
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return state + 1;
    default:
      return state;
  }
};

Store Subscription: You can subscribe to the Redux store to listen for changes in the state. Whenever the state changes, the subscribed callback function is called. 

Example:

?

1 2 3	store.subscribe(() => {   console.log('State changed:', store.getState()); });

store.subscribe(() => {
  console.log('State changed:', store.getState());
});

Connect Redux with Components: React components can access the Redux store and dispatch actions using the connect() function from the react-redux library. This function connects the component to the Redux store and provides the necessary state and action props. 

Example:

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22	import { connect } from 'react-redux';   const MyComponent = ({ counter, incrementCounter }) => {   return (     <div>       <h2>Counter: {counter}</h2>       <button onClick={incrementCounter}>Increment</button>     </div>   ); };   const mapStateToProps = (state) => {   return {     counter: state   }; };   const mapDispatchToProps = {   incrementCounter };   export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

import { connect } from 'react-redux';

const MyComponent = ({ counter, incrementCounter }) => {
  return (
    <div>
      <h2>Counter: {counter}</h2>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

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

const mapDispatchToProps = {
  incrementCounter
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

In this example, connect() connects MyComponent to the Redux store. The mapStateToProps function maps the state from the store to the component props, and mapDispatchToProps maps the action dispatchers to the component props. By dispatching actions, the state in the store gets updated, and connected components receive the updated state as props, triggering a re-render. That's a basic overview of how Redux works with an example. It provides a centralized store, actions to describe state changes, reducers to handle state updates, and a way to connect components to the store. This pattern helps manage and update the application state in a more predictable and manageable way.