Modern React Redux in 2020 with Hooks and Toolkit

If you're new to Redux, i highly suggest you start with using Redux Toolkit (@reduxjs/toolkit). This makes things simple and takes away a lot of boilerplate. If you then want to understand what is happening under the hood, or having difficulty understanding a particular Redux concept, only then go to the original Redux docs and figure out the details.

• Hooks: useSelector() and useDispatch() (react-redux v7.1.0+. Previously you had to wrap your components in connect())
• Redux Toolkit: createSlice(), createAction(), configureStore()

Redux Toolkit is just Redux with opinions and helper functions

No more mapStateToProps, mapStateToProps (both are Redux only, react-redux will give you connect() to handle both), action creators

useDispatch prevents us from using mapDispatch and connect

useDispatch(fetchPokemonNames());

const { pokemonTeam, favoritePokemon } = useState((state) => state.pokemonTeam); // get the pokemonTeam array and favoritePokemon array from state

Redux Toolkit comes with Redux DevTools built-in and pre-configured

// basic Store without any middleware
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./root-reducer";

const store = () =>
  configureStore({
    reducer: rootReducer,
  });

export default store;

Actions

With createAction() you no longer need action constants and action creators..

const INCREMENT = "counter/increment";

function increment(amount) {
  return {
    type: INCREMENT,
    payload: amount,
  };
}

const action = increment(3);
// { type: 'counter/increment', payload: 3 }

would become this

const increment = createAction("counter/increment");

let action = increment();
// { type: 'counter/increment' }
action = increment(3);
// returns { type: 'counter/increment', payload: 3 }