React Redux part1

Denne opgave er en introduktion til Redux Toolkit (afløser for Redux connect function med mapStateToProps).

Step 1 (Opstart)
Opret et nyt projekt med kommandoen: 'npx create-react-app redux-toolkit-counter --template redux'

Step 2 (counterSlice.js)
a) Start med at slette hele indholdet af src-mappen.
b) Opret derefter en ny mappe 'component' i src-mappen.
c) Opret en ny fil i component-mappen: counterSlice.js og indsæt følgende kode:

import { createSlice } from '@reduxjs/toolkit';

const initialState = {

value: 0,

};

export const counterSlice = createSlice({

name: 'counter',

initialState,

reducers: {

increment: (state) => {

state.value += 1;

decrement: (state) => {

state.value -= 1;

});

export const { increment, decrement } = counterSlice.actions;

export const selectCount = (state) => state.counter.value;

export default counterSlice.reducer;

Gennemgå og diskuter: hvad indeholder den indsatte kode?

Step 3 (store.js)

a) Opret en ny mappe 'app' under src-mappen
b) Opret en ny fil store.js i app-mappen og indsæt følgende kode:

import { configureStore } from '@reduxjs/toolkit';

import counterReducer from '../components/counterSlice';

export const store = configureStore({

reducer: {

counter: counterReducer,

});

Step 4 (counter.js)
a) Opret en ny fil counter.js i components-mappen
b) Indsæt følgende kode:

import React from 'react';

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

import {decrement, increment, selectCount } from './counterSlice';

export function Counter() {

const dispatch = useDispatch();

const count = useSelector(selectCount);

return (

<div>

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

Increment

</button>

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

Decrement

</button>

Current count: <span>{count}</span>

</div>

);

}

Step 5 (App.js)
a) Opret en ny fil App.js under src-mappen
b) Indsæt følgende kode:

import React from 'react';

import { Counter } from './components/counter';

function App() {

return (

</div>

);

}

export default App;

Step 6 (index.js)
a) Opret en ny fil index.js under src-mappen
b) Indsæt følgende kode:

import React from 'react';

import { createRoot } from 'react-dom/client';

import { Provider } from 'react-redux';

import { store } from './app/store';

import App from './App';

const container = document.getElementById('root');

const root = createRoot(container);

root.render(

<React.StrictMode>

<App />

</Provider>

</React.StrictMode>

);

Step 6 (Afprøv og giv noget styling)
a) Afprøv at appen virker, kør: 'npm start' (NB husk at starte appen fra den rigtige mappe, dvs 'redux-toolkit-counter')
b) Tilføj noget styling (Bootstrap, SemanticUI, alm CSS, ...)

Exercise: React Redux Toolkit part 1