React Redux Tutorial Часть 5. Обзор использования useSelector

почему

https://react-redux.js.org/api/hooks#useselector-examples

Было объяснение useSelector как альтернативы подключению в React Redux, но это не было учебным пособием, поэтому давайте попробуем заставить его работать

Что происходит, когда вы подключаетесь

https://dev.to/kaede_io/react-redux-tutorial-part-4-connect-api-woshi-tute-todo-apuriwozuo-ru-23f9

На момент написания этой статьи

redux/actions -> reducers -> redux/store -> src/index/Provider

и

redux/store -> redux/selectors.js -> Components/… /connect(mapToStateProps)

Это нужно.

Поток в useSelector

reducers -> redux/store -> Components/… /useSelector

Предсказывает, что его можно принимать вместе с этим.

CRA с TS для создания хранилища и редукторов

npx create-react-app redux-useselector --template typescript

CRA с TS для создания приложения React с именем redux-useselector

https://dev.to/kaede_io/react-redux-part-1-react-redux-nodao-ru-5o1

Я снова последовал за этим потоком.

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
  },
})
export const { increment, decrement, incrementByAmount } = counterSlice.actions
// exporting increment and decrement

export default counterSlice.reducer
// exporting counter state

И снова я определил глобальное состояние в файле среза
Экспорт по умолчанию, а затем

export function Counter() {
  const count = useAppSelector((state) => state.counter.value)

Глобальное состояние вводится с помощью useSelector (который обертывает useSelector).