React
State Management
Mer sofistikerad
Från React Hook useReducer
=> Redux Toolkit
DEL 2
Redux
Ett bibliotek för state management och använder samma teknik som i useReducer
Samma grundtanke som useReducer
State
Reducer
Dispatch
Action
Redux Store
State
Reducer
Dispatch
Med Redux placeras denna funktionalitet i en s.k "store"
App
Component
Component
Enskilda komponenter kan få access till store och hantera states!
Redux Store
State
Reducer
Dispatch
Redux har dock ingen aning om just React används i vyn!
App
Component
Component
React-Redux
Förutom Redux Toolkit måste vi installera React-Redux som kommunicerar mellan vår React app och Redux store!
Varför Redux?
- Om en applikation ökar i komplexitet och behöver flera reducers för att uppdatera state är det en idé med Redux
- Det finns en central knytpunkt för varje state-ändring - dispatch-funktionen! Denna kan användas för att logga händelser för actions och states i hela applikationen.
REDUX STORE
State
Reducer
Dispatch
Reducer
Reducer
Action
Nackdel med Redux?
“- Configuring a Redux store is too complicated
- I have to add a lot of packages to get Redux to do anything useful
- Redux requires too much boilerplate code”
Så därför. Redux Toolkit
Redux Toolkit (RTK)
Redux
Vår React-app
En slags mellanhand som förenklar processen
Komma igång med Redux Toolkit
1. Setup
2. Skriva features
(slice, actions)
3. Integrera
Vad är en Slice i RTK?
"Redux Toolkit architecture is to break each functionality in a feature slice and as more and more features are added we can than accessing each “slice” of data. If we think in terms of food the Redux is a vanilla flavor icecream one flavor our store holds all the data. In our Redux Toolkit, our store is more like a pizza, our “slice” is like a slice of pizza and all the slices make up our store."
createSlice()
- En slice är en del av store, precis som en pizzabit av hela pizza. Här definieras namn, initiala state-värdern och reducerfunktionerna.
- Man skapar en slice med funktionen createSlice() och definierar name, initialState, reducers
- Fördel med slice:s är att de kan vara i egen fil och lättare att organisera och underhålla
"Redux Toolkit also runs the Immer library https://github.com/immerjs/immer which lets us write the code in a mutative way — we create the next immutable state tree by simply modifying the current tree. "
Viktigt att veta!
Läs mer här! https://redux-toolkit.js.org/usage/immer-reducers
Exempel userSlice.js
import { createSlice } from '@reduxjs/toolkit';
const userSlice = createSlice({
name: 'user',
initialState: {
currentUser: null,
users: []
},
reducers: {
setCurrentUser: (state, action) => {
state.currentUser = action.payload;
},
setUsers: (state, action) => {
state.users = action.payload;
},
addUser: (state, action) => {
state.users.push(action.payload);
}
}
});
export const { setCurrentUser, setUsers, addUser } = userSlice.actions;
export default userSlice.reducer;
# REDUX TOOLKIT
Exempel postSlice.js
import { createSlice } from '@reduxjs/toolkit';
const postSlice = createSlice({
name: 'post',
initialState: {
posts: []
},
reducers: {
setPosts: (state, action) => {
state.posts = action.payload;
},
addPost: (state, action) => {
state.posts.push(action.payload);
},
deletePost: (state, action) => {
state.posts = state.posts.filter(post => post.id !== action.payload);
}
}
});
export const { setPosts, addPost, deletePost } = postSlice.actions;
export default postSlice.reducer;
# REDUX TOOLKIT
Redux Toolkit store
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';
import postReducer from './postSlice';
const store = configureStore({
reducer: {
user: userReducer,
post: postReducer
}
});
export default store;# REDUX TOOLKIT
Filstruktur
Antingen per component eller per feature
Gruppuppgift
- Varje gruppmedlem har ansvaret att skapa en slice. Den slice som skapas ska hantera att lägga till, samt ta bort ett item från en lista. Det som läggs till i listan ska vara text från en input-ruta
- Varje gruppmedlem har sin "favoritlista" - döp den därefter, ex melloSongsList.js
- Integrera gruppens olika slice:s i var sin Reactkomponent till en Reactapp
- När ni integrerar, diskutera de olika delarnas betydelse: slice, action, payload, store, useSelector, useDispatch, o.s.v
- Slutresultat är att ni har en sida som innehåller x antal listor som kan modifieras!
Fördjupning
Utforska när ni ser behov i projektet
- createAsyncThunk för att fetcha data, underlättar, men inte ett måste
- Man vill trigga actions från olika slices samtidigt. Exempelvis en reset på alla listor. Kolla in extraReducers
- Derived state - beräknas utifrån states i olika slices