Integrating Redux

Integrating Redux: Creating a Store and Using getState and dispatch

The time to incorporate the Redux library is now. In this lecture, we will create our store using the createStore function from the Redux library. Once our store is set up, we will use the getState method to access its state and trigger new actions through the dispatch method. By the end of this lecture, you will have a fully functioning Redux store, ready to be integrated into your application.

Setting Up Redux

To start using Redux, the first step is to install the Redux library. This can be done using npm as follows:

npm install redux

Once Redux is installed, we can import the createStore function and use it to create our store.

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

const store = createStore(counter);

In this example, we import the createStore function and use it to create our Redux store, wrapping our counter reducer with it. This store is the central state manager that allows us to access and modify the state.

Understanding getState and dispatch

With the store in place, we now have access to three main methods that are part of Redux's core API: getState, dispatch, and subscribe. In this lecture, we'll focus on the first two.

1. getState: This method returns the current state of the store. It helps us understand what the store contains at any given time.

2. dispatch: The dispatch method is used to send actions to the store. Actions are plain JavaScript objects that describe what we want to do with the state—such as incrementing or decrementing a counter. By dispatching an action, we ask the reducer to update the state based on that action.

Here's an example:

// Dispatching actions to modify the state
store.dispatch({ type: 'STEP_UP' });
console.log(store.getState()); // Outputs: 1

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

When we dispatch an action, the store automatically invokes the reducer and passes it the current state and the action. The reducer then calculates the new state and returns it, allowing us to keep our application's state predictable and traceable.

The createStore Function

The createStore function is used to create the Redux store and requires a reducer as its argument. The store uses the reducer to know how to respond to different actions and update the state accordingly. When you call createStore(counter), Redux initializes the store with the reducer and sets the initial state based on the reducer's default value.

In our case, the counter reducer was previously defined like this:

function counter(state = 0, action) {
  switch (action.type) {
    case 'STEP_UP':
      return state + 1;
    case 'STEP_DOWN':
      return state - 1;
    default:
      return state;
  }
}

Testing Our Store

Testing is crucial when working with Redux, as it ensures that our reducers behave as expected. We can create a separate test file to validate the behavior of our store using Jest. Here's an example test that checks the default state and how the actions are processed:

import store from './store';
import { STEP_UP, STEP_DOWN } from './constants';

test('initial state is 0', () => {
  expect(store.getState()).toBe(0);
});

test('increments state by 1', () => {
  store.dispatch({ type: STEP_UP });
  expect(store.getState()).toBe(1);
});

test('decrements state by 1', () => {
  store.dispatch({ type: STEP_DOWN });
  expect(store.getState()).toBe(0);
});

These tests ensure that our actions (STEP_UP and STEP_DOWN) correctly modify the state. By dispatching actions and comparing the results against expected values, we can confidently verify that our reducers are working properly.

Conclusion

In this lecture, we incorporated Redux into our project by setting up a store using the createStore function, and we explored the key methods getState and dispatch to manage our application state. The store acts as a mediator between the reducer and the rest of our application, ensuring that state changes are predictable and traceable.

With this foundation, we are now ready to integrate Redux with our React components and start making our application truly dynamic. Stay tuned for the next lecture, where we will continue building upon this setup and begin rendering data from our Redux store within a React application.

Happy coding!