И мир празднует!

IMHO Redux - один из лучших фреймворков для управления состоянием React. Моя единственная проблема с этим? Bolierplate-y mapStateToProps, mapDispatchToProps и функция подключения. Компоненты контейнера выглядели как нагромождение проводов и соединений. Когда я начал работать с Redux, это было моей самой большой проблемой. Мне понравилась концепция редукторов и действий. Но установка такого реквизита никогда не казалась правильной. Что ж, не беспокойтесь больше.

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

Это простой пример того, как Контейнер передает свойства компонентам. И теперь вы можете это сделать:

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

Теперь опыт разработчиков великолепен. Вы точно знаете, что происходит. И да, это на самом деле возврат компонента. ‹TodoList todos = {todos} /› превосходит connect (mapStateToProps) (TodoList) в любое время дня. Магия в этих крючках:

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

useSelector () принимает функцию сопоставления, которая возвращает часть дерева состояний.

Как насчет примера, который также обертывает диспетчерские действия вокруг действий и передает их в 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)

Его можно заменить на:

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 () - еще один хук, который возвращает весь магазин. Не рекомендуется.

Ну это все. Два крючка для улучшения читаемости кода. Подробнее здесь:



Перехватчики · React Redux
Новые API« перехватчиков React дают функциональным компонентам возможность использовать локальное состояние компонента, выполнять побочные эффекты и… React-redux. js.org »



Команда Redux немедленно удалила хуки useActions () и useRedux () после их первоначальной публикации. Это все еще альфа-версия. И я думаю, что мы правильно поняли. Подведем итог, что нам нужно сделать, чтобы использовать Redux,

  1. Определите свои объекты действий, создателей действий, напишите свои редукторы, объедините их и создайте магазин.
reducers = combineReducers(data1, data2)
store = createStore(reducers)

2. Оберните свое приложение поставщиком магазина.

<Provider store={store}>

3. Чтобы получить доступ к редуктору, используйте ловушку в функциональном компоненте.

data1 = useSelector(state => state.data)

4. Чтобы отправить действие

dispatch = useDispatch()
dispatch(action)

Всего пять вещей, которые нужно запомнить. Два из них вы просто устанавливаете один раз. Вот пример приложения todos Redux, преобразованного в хуки.

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