MENU


<Provider>, UseSelector(), UseDispatch()

Under the hood, React Redux uses React's "context" feature to make the Redux store accessible to deeply nested connected components.


// index.jsimport React from 'react';import { createRoot } from 'react-dom/client';import App from './App';import store from './store'import { Provider } from 'react-redux'const root = createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}><App /></Provider>);

// counterSlice.jsimport { createSlice } from '@reduxjs/toolkit';export const counterSlice = createSlice({
  name: 'counter',
  initialState: {value: 0},
  reducers: { increment: (state) => {state.value += 1; },
    decrement: (state) => {state.value -= 1; },
    incrementByAmount: (state, action) => {state.value += action.payload}},});export const { increment, decrement, incrementByAmount } = counterSlice.actions;export default counterSlice.reducer

// store.jsimport { configureStore } from '@reduxjs/toolkit'import counterReducer from './counterSlice'export default configureStore({  reducer: {counter: counterReducer},})

// App.jsimport React, { useState } from 'react'import { useSelector, useDispatch } from 'react-redux'import { decrement, increment } from './counterSlice'export default function App() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()
  return (<div><button onClick={() => dispatch(increment())}>Increment</button>
    <span>{count}</span>
    <button onClick={()=>dispatch(decrement())}>Decrement</button></div>)}

It is totally possible to code React apps without Redux.

You should start with pure React, then learn Redux only once you feel you need it. After you have some real experience with React, you will see whether Redux is helpful for you. If you start directly with Redux, you may end up with over-engineered code, harder to maintain and with even more bugs.