Redux in react

 React Redux 8.x requires React 16.8.3 or later / React Native 0.59 or later, in order to make use of React Hooks.

React Redux includes a <Provider /> component, which makes the Redux store available to the rest of your app:

import React from 'react'

import ReactDOM from 'react-dom/client'

import { Provider } from 'react-redux'

import store from './store'

import App from './App'

// As of React 18

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(

  <Provider store={store}>

    <App />

  </Provider>,

)

useSelector reads a value from the store state and subscribes to updates, while useDispatch returns the store's dispatch method to let you dispatch actions.

import React from 'react'

import { useSelector, useDispatch } from 'react-redux'

import {

  decrement,

  increment,

  incrementByAmount,

  incrementAsync,

  selectCount,

} from './counterSlice'

import styles from './Counter.module.css'

export function Counter() {

  const count = useSelector(selectCount)

  const dispatch = useDispatch()

  return (

    <div>

      <div className={styles.row}>

        <button

          className={styles.button}

          aria-label="Increment value"

          onClick={() => dispatch(increment())}

        >

          +

        </button>

        <span className={styles.value}>{count}</span>

        <button

          className={styles.button}

          aria-label="Decrement value"

          onClick={() => dispatch(decrement())}

        >

          -

        </button>

      </div>

      {/* omit additional rendering output here */}

    </div>

  )

}

Redux Toolkit