Introduction to Redux

Redux is a popular state management library for JavaScript applications, widely used with libraries such as React, Angular, and Vue. It helps manage the application state in a predictable way, making complex state transitions easier to handle and debug. In this guide, we’ll explore various Redux APIs with examples and show how to build a simple application using these APIs.

Key Concepts and API Examples

1. createStore

The createStore function creates a Redux store that holds the complete state tree of an application. There should only be one store in a Redux app. Here is an example:

import { createStore } from 'redux';

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

const store = createStore(reducer);

2. dispatch

The dispatch function is used to send actions to the Redux store. Here’s how you can increment and decrement the state:

store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }

store.dispatch({ type: 'DECREMENT' });
console.log(store.getState()); // { count: 0 }

3. getState

The getState function returns the current state of the Redux store. Here is an example:

const currentState = store.getState();
console.log(currentState); // { count: 0 }

4. combineReducers

The combineReducers function merges multiple reducers into a single reducer function. Here’s an example of how to use it:

import { combineReducers } from 'redux';

const userReducer = (state = { name: '' }, action) => {
  switch (action.type) {
    case 'SET_NAME':
      return { ...state, name: action.name };
    default:
      return state;
  }
};

const postsReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_POST':
      return [...state, action.post];
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  user: userReducer,
  posts: postsReducer
});

const store = createStore(rootReducer);

5. applyMiddleware

The applyMiddleware function is used to extend Redux with custom middleware. Here’s an example:

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';

const logger = store => next => action => {
  console.log('dispatching', action);
  let result = next(action);
  console.log('next state', store.getState());
  return result;
};

const store = createStore(
  rootReducer,
  applyMiddleware(thunk, logger)
);

Simple Application Example

Let’s create a simple counter application to demonstrate how to use these Redux APIs together with React:

1. Install Dependencies

npm install redux react-redux

2. Create the Redux Store

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom';

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

const store = createStore(counter);

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

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

  return (
    <div>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Conclusion

Redux is a powerful library for managing the state in JavaScript applications. By using its APIs like createStore, dispatch, getState, combineReducers, and applyMiddleware, you can maintain an organized and predictable state architecture. The simple counter application provided here illustrates the basic usage, but Redux can scale to handle more complex state management needs in your applications.

Hash: 080baa17c90b5e97f32d94164cb0ec3f1729753654e21295166499bb454b88c8