redux-toolkit.md

Redux Toolkit Actions

rdac - Redux Toolkit: Create Action (Also used with createReducer in the last example below... not sure where/when to utilize though)

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

const name = createAction('action/type');

action - Redux: Dispatch Action (Preferred Async Await approach)

export const  = () => {
  return async dispatch => {
    try {

    } catch (e) {}
  };
};

Redux Toolkit Store

rts - Redux Toolkit: Configure Store

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

import reducer from 'location';

export default configureStore({
  reducerName: reducer,
});

Redux Toolkit Slice

rtcs - Redux Toolkit: Create Slice (Remember to then include an export for action selector function showing impact on state)

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

const initialState = {};

export const sliceName = createSlice({
  name: 'name',
  initialState,
  reducers: {
    name: (state, action) => {
      // ...
    },
  },
});

export const { name } = sliceName.actions;

export default sliceName.reducer;

Redux Selectors

rxselect - Redux: Create Select (Can also be used for Redux-Toolkit when creating the selector at bottom of the slice)

import { createSelector } from 'reselect';

export const first = (state) => state.second;

Redux Reducer

rdcr - Redux: Combine Reducer (Also very useful when utilizing Redux Toolkit to export it to the configureStore.js or just store.js)

import { combineReducers } from 'redux';

import reducerName from 'reducerPath';

export default combineReducers({
  
});

rtcr - Redux Toolkit: Create Reducer, Create Action (Not sure when or where to use since we can use createSlice)

import { createAction, createReducer } from '@reduxjs/toolkit';

const name = createAction('action/type');

const initialState = {};

const reducerName = createReducer(initialState, builder => {
  builder
    .addCase(name, (state, action) => {
      
    });
});

Redux Provider

provider - Redux: Provider from React-Redux

<Provider store={store}>
  Component
</Provider>