Redux boilerplate for React projects

README.md

React med Redux

Boilerplate för projekt

1. Installera: starta upp projekt med Vite och git + GitHub

npm create vite@latest
cd my-app-name/
npm i redux react-redux @reduxjs/toolkit immer
git init
git add --all
git commit -m "Initial files"

2. Skapa repo på GitHub och anslut ditt projekt till det

3. Skapa mappar och filer i src-mappen:

• store.jsx
• components/
• features/
  • rootReducer.js
  • feature1.js

counter.js

// src/features/counter.js
// Exempel på reducer
import { createAction, createReducer } from '@reduxjs/toolkit'

// ACTIONS
/*
Används för att ange vad som kan hända i appen. Actions triggas oftast när användaren gör något. Reducers kan bara producera nästa state som respons på en action.
"Counter reducer" är en enkel räknare med två actions:
- öka värde med 1
- öka värde med ett godtyckligt tal
*/
const increaseByOne = createAction('Increase by 1')
const increase = createAction('Increase')

// Bunta ihop actions i ett objekt för att enklare kunna exportera och importera dem
const actions = { increaseByOne, increase }


// Detta är default-värdet på state för "counter feature"
const initialState = 1

// REDUCER
/*
En reducer producerar nästa state med hjälp av ett action, som talar om vilken händelse som har inträffat. Om en action innehåller data så ligger den i action.payload.
(nuvarandeState, inkommandeAction) => nästaState
*/
const reducer = createReducer(initialState, {
	[increaseByOne.toString()]: (state, action) => state + 1,
	[increase.toString()]: (state, action) => state + action.payload
})


export { actions, reducer }

Counter.jsx

// src/components/Counter.jsx
import { useDispatch, useSelector } from 'react-redux'
import { actions } from '../features/counter'

const Counter = () => {
	// 	dispatch används för att skicka actions till store, så att reducers kan producera nästa state
	const dispatch = useDispatch()
	
	// 	useSelector väljer ut en del av state från Redux store. "counter" är namnet på din reducer i rootReducer-filen.
	const count = useSelector(state => state.counter)

	const increase1 = () => dispatch( actions.increaseByOne() )
	const increase5 = () => dispatch( actions.increase(5) )

	return (
		<div>
			Value is: {count}.
			<button onClick={increase1}> +1 </button>
			<button onClick={increase5}> +5 </button>
		</div>
	)
}

export default Counter

main.jsx

// src/main.jsx
// Om du använder create-react-app hter filen index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

// Provider måste wrappa App-komponenten
import { Provider } from 'react-redux'
import { store } from './store'

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
)

rootReducer.js

// src/features/rootReducer.js
import { combineReducers } from 'redux'
import { reducer as counter } from './counter'

const rootReducer = combineReducers({
	counter: counter
	// lägg till fler reducers efter behov
})

export { rootReducer }

store.js

// src/store.js
import { configureStore } from '@reduxjs/toolkit'
import { rootReducer } from './features/rootReducer'

const store = configureStore({
	reducer: rootReducer
})

export { store }

// Om du använder TypeScript behöver store-filen exportera datatypen för state