@reduxjs/toolkit et react-redux

@redux et react-rtk

@redux/toolkit et react-redux

redux react-redux

app/store.js

import { combineReducers, configureStore } from "@reduxjs/toolkit"
import { exampleSlice } from "../features/cart/cartSlice";

let state = {
  example: {},
};

export const store = configureStore(
  {
    preloadedState: state,
    reducer: combineReducers({
     example: exampleSlice.reducer,
    })
  }
)

app/App.js

import { Provider } from 'react-redux'
import { store } from './store';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
      </div>
    </Provider>
  );
}

export default App;

app/store.js

import { combineReducers, configureStore } from "@reduxjs/toolkit"
import { exampleSlice } from "../features/cart/cartSlice";

let state = {
example: {},
};

export const store = configureStore(
  {
    preloadedState: state,
    reducer: combineReducers({
      example: exampleSlice.reducer,
    })
  }
)

app/App.js

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

app/store.js

import { combineReducers, configureStore } from "@reduxjs"
import { exampleSlice } from "../features/cart/cartSlice";

let state = {
  example: {},
};

export const store = createStore(
  {
    preloadedState: state,
    reducer: combineReducers({
      example: exampleSlice.reducer,
    })
  }
)

app/App.js

import { Provider } from '@reduxjs'
import { store } from './store';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
      </div>
    </Provider>
  );
}

export default App;

app/store.js

import { combineReducers, configureStore } from "@reduxjs/toolkit"
import { exampleSlice } from "../features/cart/cartSlice";

let state = {
  example: {},
};

export const store = configureStore(
  {
    preloadedState: state,
    reducer: combineReducers({
      example: exampleSlice.reducer,
    })
  }
)

app/App.js

import { Provider } from 'react-redux'

function App() {
  return (
    <Provider>
      <div className="App">
      </div>
    </Provider>
  );
}

export default App;

Visualiser les actions Redux sans offrir la possibilité d'interagir ou de les modifier.

Éditer le code source de l'application directement depuis l'outil, fonctionnant comme un éditeur de code intégré.

Gérer les dépendances et les packages de l'application, comme npm ou yarn.

Débugger les applications avec Redux intégré, comme le suivi du changement du state.