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.

Installation

yarn add redux react-redux

Store

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':
      clothes.push(item);
      return {
        clothes
      };
  }
  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

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:

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

connect

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'});
}}>Create</button>

MapStateToProps

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);