CodeLikeAGirl29 / redux-expenses

Expense Tracking app that utilizes Redux Toolkit in a React site. 💰

Expense Tracker

A budgeting tool that demonstrates use of Redux-toolkit

Link to the demo site can be found here

Tech Stack

Installation

Implement use of redux-toolkit.

• Install @reduxjs/redux-toolkit npm install @reduxjs/redux-toolkit Some of the resources imported from @reduxjs/redux-toolkit are:

• createSlice

• configureStore

createSlice() Options Object

/*
The action.type strings created will be
'budgets/editBudget' and 'budgets/newBudgets'
*/
const options = {
  name: 'budgets',
  initialState: [],
  reducers: {
    editBudget: state => [],
    newBudgets: (state, action) 
      => [...state, action.payload]
  }
}
const todosSlice = createSlice(options);

The createSlice() function is used to simplify and reduce the code needed when creating application slices. It takes an object of options as an argument. The options are:

• name: the slice name used as the prefix of the generated action.type strings
• initialState: the initial value for the state to be used by the reducer
• reducers: an object of action names and their corresponding case reducers

Slices with createSlice()

createSlice() returns an object containing a slice reducer (budgetsSlice.reducer) and corresponding auto-generated action creators (transactionsSlice.actions).

The slice reducer is generated from the case reducers provided by options.reducers. The action creators are automatically generated and named for each case reducer. The action.type values they return are a combination of the slice name ('budgets') and the action name ('newBudgets') separated by a forward slash (budgets/newBudgets). When creating slices in separate files it is recommended to export the action creators as named exports and the reducer as a default export.

Screenshot:

Based on a Codecademy project