Redux & MobX - rs-hash/Learning GitHub Wiki

Redux & MobX

External state management libraries in React are used to manage global state and facilitate communication between components without the need for complex prop drilling. These libraries provide centralized stores and mechanisms for updating and accessing state across the application. Two popular external state management libraries in React are Redux and MobX. Let's explore both of them with code examples:

Redux:

Step 1: Install Redux and React-Redux:

npm install redux react-redux

Step 2: Create a Redux Store and Reducer:

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

// Initial state
const initialState = {
  count: 0,
};

// Reducer function
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;
  }
};

// Create the Redux store
const store = createStore(counterReducer);

export default store;

Step 3: Provide the Redux Store to the Application:

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

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

Step 4: Use Redux in Components:

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

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

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const handleDecrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default App;

MobX:

Step 1: Install MobX and MobX React:

npm install mobx mobx-react

Step 2: Create an Observable Store:

// store.js
import { observable, action } from 'mobx';

class CounterStore {
  @observable count = 0;

  @action increment() {
    this.count += 1;
  }

  @action decrement() {
    this.count -= 1;
  }
}

const counterStore = new CounterStore();
export default counterStore;

Step 3: Provide the Store to the Application:

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

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

Step 4: Use MobX in Components:

// App.js
import React from 'react';
import { observer, inject } from 'mobx-react';

function App({ counterStore }) {
  const handleIncrement = () => {
    counterStore.increment();
  };

  const handleDecrement = () => {
    counterStore.decrement();
  };

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {counterStore.count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default inject('counterStore')(observer(App));

Both Redux and MobX provide ways to manage global state in your React application efficiently. While Redux follows a more strict and predictable pattern, MobX offers more flexibility with its observable and action decorators. Choose the one that fits your project requirements and team preferences.

⚠️ **GitHub.com Fallback** ⚠️