Step by step implementation of implementing redux in reactjs

 

Here is a step-by-step guide on how to create a Redux store in ReactJS:

1. Install the Redux and React Redux packages using npm or yarn.

// Using npm
npm install redux react-redux

// Using yarn
yarn add redux react-redux

2. Create a new file called store.js and import the createStore and applyMiddleware functions from the Redux package.

import { createStore, applyMiddleware } from 'redux';

3. Define a reducer function that takes the current state of the application and an action, and returns the new state. The reducer function should handle all of the possible actions that can be performed in your application.

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

4. Create the Redux store by calling the createStore function and passing in the reducer function and the initial state of the application.

const initialState = {
  counter: 0,
};

const store = createStore(reducer, initialState);

5. If you want to use middleware with your Redux store, you can call the applyMiddleware function and pass in the middleware you want to use, and then pass the result to the createStore function.

const initialState = {
  counter: 0,
};

const middleware = applyMiddleware(logger, thunk);
const store = createStore(reducer, initialState, middleware);

6. Import the Provider component from the React Redux package and wrap your root React component with it. Pass the Redux store to the Provider component as a prop.

import { Provider } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
      <MyRootComponent />
    </Provider>
  );
}

7. In any of your React components, you can connect them to the Redux store using the connect function from the React Redux package. The connect function takes two arguments: a mapStateToProps function that maps the state of the Redux store to the props of your component, and a mapDispatchToProps function that maps the dispatch function to the props of your component.

import { connect } from 'react-redux';

function MyComponent(props) {
  return (
    <div>
      <p>Counter: {props.counter}</p>
      <button onClick={props.increment}>Increment</button>
      <button onClick={props.decrement}>Decrement</button>
    </div>
  );
}

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

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' }),