React Redux cheatsheet

This is my summary of the bare minimum steps as a quick-ref cheatsheet for adding Redux to an existing React app. This is just some notes for future reference. If you’re looking for tutorials, take a look at:

Here’s my quickref:

npm i react-redux

Add Redux devtools for Chrome (see here):

npm install --save redux-devtools-extension

Wrap <Provider> around root Component to share the Store with all child components:

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

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

Implement mapStateToProps and mapDispatchToProps to pass store and dispatch() as props to each Component, and call connect() to connect each Component with your Redux Store:

const mapStateToProps = (state) => {
  return {
    yourcomponent: state.yourcomponent
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(YourComponent)

Create a Store:

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';
let store = createStore(yourReducer, devToolsEnhancer());
export default store;

Create reducers for Store – here’s an example that take the the value of a label from the passed action payload and sets it in the Store – remember the state of the store is always treated as immutable, so always create a new copy of the modified state, here using Object.assign():

function labelReducer(state = initialState, action) {
  switch (action.type) {
    case 'CHANGE_LABEL':
      return Object.assign( {},{ labelValue : action.payload 
    } );
    default:
      return state;
    }
}

Implement an action creator that builds an Action object that requests changes to the Store – each action has a type and a payload:

export function changeLabel(payload) {
  return { type: "LABLE_CHANGE", payload }
};

Implement mapDispatchToProps – you can either build the Action object yourself here, or call an Action creator like the above example:

function mapDispatchToProps(dispatch) {
return {
  changeLabel: labelValue => 
    dispatch(changeLabel(labelValue))
  };
}

Pass mapDispatchToProps to your connect() call shown earlier.

As a comparison, here’s a simple React app using Flux:

https://github.com/kevinhooke/SimpleReactFluxExample

… and here’s the same app converted to use Redux:

https://github.com/kevinhooke/SimpleReactReduxExample

Done!

React and Redux error: “_react.default.createContext is not a function”

I’m adding Redux to an existing React app, converting from Flux to Redux. After wrapping my root component with the <Provider> I got this error and the app doesn’t initialize:

_react.default.createContext is not a function

Doing a quick search found this post suggesting I’ve got a mismatch in versions between newest Redux versions and possibly older versions of React. This is possible as I’m updating an older React app I put together a couple of years ago. Quick way to test this, remove React and react-dom and add them back again.

Right now I have:

"react": "^15.4.1",
"react-dedux": "^0.4.0-beta.4",
"react-dom": "^15.4.1",
"react-redux": "^7.2.0"

Removed React and react-dom and added back latest versions:

"react": "^16.13.1",
"react-dedux": "^0.4.0-beta.4",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0"

Restated my app, fixed!