React.js State Management Libraries

State Management Libraries in React.js:

State management libraries like Redux and MobX are commonly used in React.js applications to manage complex application state in a predictable and centralized manner.

Introduction to Redux:

Redux is a predictable state container for JavaScript applications.

Besides acting as the control center that determines the state of your whole application, it performs action and reducer functions to ensure the consistent updating of your app's state.

Setting up Redux for state management:

Installation:

Install Redux and React-Redux (the official Redux bindings for React) in your project:

                                      
                                      npm install redux react-redux

                                      
                                      yarn add redux react-redux

Creating actions:

Actions are plain JavaScript objects that represent events in your application.

They are dispatched to trigger state changes.

                                      
                                      // actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

Creating reducers:

Reducers specify how the application's state changes in response to actions.

They are pure functions that take the current state and an action, and return a new state.

                                      
                                      // reducers.js
const initialState = {
  count: 0
};

const counterReducer = (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;
  }
};

export default counterReducer;

Creating the store:

The store holds the application state and provides methods to dispatch actions and subscribe to changes.

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

const store = createStore(counterReducer);

export default store;

Providing the store to your application:

Wrap your root component with the <Provider> component from React-Redux to provide the Redux store to your application.

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

ReactDOM.render(
  <Provider store={store}>
  <App />
  </Provider>,
  document.getElementById('root')
);

Actions, reducers, and the store in Redux:

Actions: Plain JavaScript objects that represent events in your application. They are dispatched to trigger state changes.

Reducers: So called pure functions, which perform the operations of state changes on the basis of actions. They take an existing model to an aspiration and receive a new model.

Store: Defines the stack of objects that store the application state and provides methods that made calls based on action, react to changes and access the state.