React Redux Notes

Redux is not just for React, it’s a store system available for other frameworks like Angular, Jquery, Ember or vanilla JS.

redux is the main package and react-redux is a supporting package for binding with react.


yarn add redux react-redux


Create a store.js file to store all the state items in it. I did it on src/redux/store.js

Import createStore which is a function from redux:

import { createStore } from 'redux';

Create a default state object to hold all of your state info:

const defaultState = {
  fruits: []

Create a reducer function which takes a state and an action object.

function reducer(state, action) {
  return state;

Always return the default state from the reducer function.

Destructure the type and item from the action object inside the function.

let { type, item } = action;

Use a switch statement to toggle between the dispatch types:

function reducer(state, action) {
  let { type, item } = action;
  let clothes = [...state.clothes];
  switch (type) {
    case 'CREATE':
      return {
  return state;

The component will send dispatch signal with a type and item key. So the reducer will catch the type and take appropriate action. Here I am pushing the item into the clothes array and then returning the whole object with the clothes array inside of it.

Create a store variable and set it equal to the createStore() function, passing in the reducer function and the default state object.

const store = createStore(reducer, defaultState);

Export the store function.


Provider is a component which wraps around the entire react application. It takes the store function as a prop. It will pass the state to all the components within the application.

Go to the index.js file where you have the <App/> component inside the ReactDOM.render() function. Import the provider from react-redux. Also import the store.

import { Provider } from 'react-redux';
import store from './components/redux/store';

Wrap the <App/> within the Provider component and pass in the store as the store prop:

  <Provider store={store}>
    <App />


Now I want to call the actions from the components. I do this by adding the connect function from react-redux:

import { connect } from 'react-redux';

Add this within the final export statement:

export default connect()(MyComponent);

Now when it’s done, it will allow me to use props.dispatch() to call the various actions. Example:

<button onClick={() => {
  props.dispatch({type: 'CREATE', item: 'something'});


This function lets me use a certain item from the state within my component. Create a function which takes a state and returns a state item:

function mapStateToProps(state) {
  return { fruits: state.fruits };

Then plug it in within the connect function:

export default connect(mapStateToProps)(MyComponent);