Redux introduces Hooks support

And the world celebrates!

IMHO Redux is one of the best state management frameworks for React out there. My only problem with it? The bolierplate-y mapStateToProps, mapDispatchToProps and the connect function. Container components looked like a jumble of wires and connections. When I started with Redux, this was my biggest pain point. I loved the concept of Reducers and actions. But wiring up props like this never felt right. Well, worry no more.

// TodoListContainer.js
import TodoList from ‘./TodoList’
function mapStateToProps(state) {
  const { todos } = state
  return { todos }
}
export default connect(mapStateToProps)(TodoList)

This is a simple example of a Container passing props to the components. And now you can do this:

// TodoListContainer.js
import TodoList from ‘./TodoList’
import { useSelector } from 'react-redux’
const TodoListContainer = () => {
  const todos = useSelector(state => state.todos);
  return <TodoList todos={todos} />
}

The developer experience is fabulous now. You know exactly what is happening. And yes, it is in fact returning a component. <TodoList todos={todos} /> beats connect(mapStateToProps)(TodoList) any time of the day. The magic is in these hooks:

useSelector(state => state.todos)
useDispatch()

useSelector() takes a mapping function that returns a part of the state tree.

How about an example that also wraps the dispatch around the actions and passes it along to connect()?

import TodoList from ‘./TodoList’
const mapStateToProps = (state) => {
  return { todos: state.todos }
}
const mapDispatchToProps = dispatch => {
  return {
     addTodo : () => dispatch ({ type: ‘add-something’ })
  }
}
export default connect(
  mapStateToProps, 
  mapDispatchToProps)(TodoList)

This can be replaced with:

import TodoList from ‘./TodoList’
import { useSelector, useDispatch } from 'react-redux’
export const TodoListContainer = () => {
  const todos = useSelector(state => state.todos)
  const dispatch = useDispatch()
  const addTodo = () => dispatch({ type: ‘add-something’ })
  return <TodoList todos={todos} onClick={addTodo} />
}

useStore() is another hook that returns the whole store. It is not recommended.

So that’s it. Two hooks to improve your code readability. More details here:

Hooks · React Redux

Redux team immediately retired useActions() and useRedux() hooks after publishing it initially. This is still an alpha release. And I think we got it right. Let us summarize what we need to do to use Redux,

1. Define your action objects, action creators, write your reducers, combine them and create a store.

reducers = combineReducers(data1, data2)
store = createStore(reducers)

2. Wrap your app with the store provider

<Provider store={store}>

3. To access your reducer, use the hook in your functional component

data1 = useSelector(state => state.data)

4. To dispatch an action

dispatch = useDispatch()
dispatch(action)

Just five things to remember. Two of those you just set it once. Here is an example of the todos Redux app converted to Hooks.

https://codesandbox.io/s/00wk44rjxl