TechnicalPig🐷: Using Redux in your Web App

What is Redux?

Redux is a state management tool often used with React. It helps you manage the state of your application by centralising the application’s state and logic in a single place.

Key Concepts in Redux

• Store: The global object that holds the application's state tree.

• Action: A plain JavaScript object describing what happened. It must have a type property to indicate the action type and can optionally have other data fields.

• Reducer: A function that determines how the application's state changes in response to actions sent to the store. It takes the previous state and an action as arguments, and returns the next state.

• Dispatch: A function that sends an action to the store, indicating that something happened and it's time to update the state based on this action.

Using Redux

To use Redux in a React application, follow these steps:

1. Install Redux and React-Redux: First, you need to add Redux to your project. React-Redux is the official Redux UI binding library for React.

npm install redux react-redux

2. Create a Redux Store: The store brings together the state, actions, and reducers that make up your app.

import { createStore } from 'redux';

const initialState = {
  counter: 0
};

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

const store = createStore(reducer);

3. Provide the Store to React Components: Use the Provider component from react-redux to pass the Redux store to your React application.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App'; // Your root component
import { store } from './store'; // The Redux store

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

4. Dispatch Actions: Use the dispatch function to send actions to the store.

store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

5. Connect React Components to Redux: Use the connect function from react-redux to read state from the Redux store and dispatch actions.

import React from 'react';
import { connect } from 'react-redux';

function Counter({ counter, dispatch }) {
  return (
    <div>
      <p>{counter}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
}

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

export default connect(mapStateToProps)(Counter);

Summary

This example covers the basics of using Redux in a React application.

What we have done:

1. create the Redux store

2. define our reducers

3. dispatch actions to change the state in our store

4. connect React components to the store