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.

// store.jsimport { configureStore } from '@reduxjs/toolkit'import counterReducer from './counterSlice'export default configureStore({ reducer: {counter: counterReducer},})
RESETRUNFULL
// index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';import store from './store'import { Provider } from 'react-redux'ReactDOM.render(
  <Provider store={store}><App /></Provider>,
  document.getElementById('root'));

// 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

// 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 Flux.

You should start with pure React, then learn Redux and Flux. 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.