Please enable JavaScript.
Coggle requires JavaScript to display documents.
Redux - Coggle Diagram
Redux
Primary Elements
Store
Store is the storage, where we store application state on it
Create store.js -> create a variable using configureStore (import from reduxjs/toolkit) and export it.
Import Provider from react-redux, and store from store.js, wrap App component with Provider, and set store argument of Provider.
-
-
Slice
Slice of data which is isolated from other slices, it has it's own reducers (functions for working with store).
create a cartSlice.js -> create a variable using createSlice which is imported from reduxjs/toolkit
createSlice expects an object with four elements: name, initialState, reducers, extraReducers.
We define actions inside reducers, each action has an status and also an action -> state is the current state, action has a payload!
Example of adding an item to cart: state.items = [action.payload, ...state.items]
-
import cartSlice in cart.js, and add cartSlice to reducer in configureStore method!
createAsyncThunk
We create an action (function), also a slice, in extraReducers, we have to listen to fetch.statuses! and set the state based on different statuses of the fetch promise!
-
-
-