DEV Community: Gabriel

How to create a VSC Snippet

Gabriel — Fri, 15 Apr 2022 11:21:46 +0000

It is very handy to use snippets in VSC such as
"rfce" and press tab to create :

import React from 'react'

function test() {
  return (
    <div>test</div>
  )
}

export default test;

I will show you how you can easily create your own custom snippets.For this example i want to create a user snippet which provides a react native function component

1. go to your settings and to "User snippets"

2.Create the snippet

Use double quotes to wrap the JSON properties and Array items, but single quotes for the strings in your code snippets.

Take a quick look at my example:

{
  "Function Component": {
    "prefix": "rnfc",
    "body": [
      "import React from 'react';",
      "import { View, StyleSheet } from 'react-native';",
      "",
      "function ${TM_FILENAME_BASE}(props){",
      "  return <View style={styles.container}>$0</View>;",
      "};",
      "",
      "const styles = StyleSheet.create({",
      "  container: {},",
      "});",
      "",
      "export default ${TM_FILENAME_BASE};"
    ]
  }

Now lets see what we got here

"prefix": "rnfc" This is your new shorthand
with "" you can define empty lines
${TM_FILENAME_BASE} creates the file with the name of the file -$0 will tell VSC where the cursor should be after creating the code block

So from now on you can always just type rnfc and press tab and you will get the code block you created.

Setup Redux Step by Step Part 2

Gabriel — Wed, 16 Mar 2022 12:37:46 +0000

In Part 1 we did a basic Setup for React Redux
using Store->Reducer->Actions and Action Types

Today we will try to simplify this using Redux Toolkit.
first we need to install it with "npm install @reduxjs/toolkit"
What we aim to do is combine the Reducer and ActionCreators in one createSlice function.

1.) We use configureStore to simplify the store
This will make it easier to use Middleware later on, and we can easy combine reducers from different files.
e.g /todos.js exports a reducer and /user.js exports a reducer

/
import reducer from './todo';
import { configureStore } from '@reduxjs/toolkit';

export default function configureAppStore() {
  return configureStore({
    reducer,
  });
}

2.) We can easy create Actions with createAction

/actionCreators.js
import { createAction } from '@reduxjs/toolkit';

const todoCreated = createAction('ADD_TODO');
const todoRemoved = createAction('REMOVE_TODO');
const updateStatus = createAction('CHANGE_STATUS');

This will create 3 actions we can dispatch like this:

import configureAppStore from './store/configureStore';

const store = configureAppStore();
store.dispatch(actions.todoCreated({ description: 'Second todo' }));
store.dispatch(actions.updateStatus({ id: 1, status: 'closed' }));

3) But we can also get rid of action creators using createSlice(this will use action creators and reducers under the hood)

/todos.js
import {  createSlice } from '@reduxjs/toolkit';
const slice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (todos, action) => {
      todos.push({
        description: action.payload.description,
        id: ++lastId,
        status: 'open',
      });
    },
    todoStatusChanged: (todos, action) => {
      const index = todos.findIndex((todo) => todo.id === action.payload.id);
      todos[index].status = action.payload.status;
    },
    todoRemoved: (todos, action) => {
      todos.filter((todo) => todo.id !== action.payload.id);
    },
  },
});

const { addTodo, todoStatusChanged, todoRemoved } = slice.actions;
export { addTodo, todoStatusChanged, todoRemoved };
export default slice.reducer;

This will create a function with initialState and reducer functions.It will also generate Action Creators.
Dont forget to export the actions , also we need to
export default slice.reducer

As you can see here:

  todos[index].status = action.payload.status;

we are mutating state directly, this is only possible because createSlice is using immutability under the hood.
So it will make your code easier to read, and much more easy
to write.

I hope this explains a little bit how redux toolkit makes things easier for us and how we can use it.

Setup Redux Step by Step Part 1

Gabriel — Tue, 15 Mar 2022 15:03:36 +0000

These are my notes on how to setup a Redux Store for React following a tutorial from https://codewithmosh.com/

1. Create Reducer
First we create a reducer, with initialState=[],the reducer could als be changed to switch if you prefer this.
The Reducer must be export default and should never mutate state.

We have 2 simple actions here
1)addTodo
2)removeTodo

/reducer.js
let lastId = 0;

function reducer(state = [], action) {
  if (action.type === 'addTodo')
    return [
      ...state,
      {
        description: action.payload.description,
        id: ++lastId,
        status: 'open',
      },
    ];
  else if (action.type === 'removeTodo')
    return state.filter((todo) => todo.id !== action.payload.id);
  else return state;
export default reducer;`
}

2.Create Store
Here we create a store which takes our reducer.The store takes the actions and forwards them to the reducer

/store.js
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

3.Dispatching Actions
This is our first simple dispatch "addTodo"

import store from './store/store';

function App() {
  store.dispatch({
    type: 'addTodo',
    payload: {
      description: 'first Todo',
    },
  });
  return <div className="App">Landing Page</div>;
}

export default App;

4.subscribe/unsubscribe to store
Here you can subscribe to the store, the function will be executed everytime the store changes

store.subscribe(() => {
    console.log('store changed', store.getState());
this function gets called every time the store changes
  });

unsubscribe:
const unsubscribe = store.subscribe(() => {
    console.log('store changed', store.getState());
  });

5.Add Types

Use Types so we do not have to hardcode them and we can change them in one single place

/types.js
export const ADD_TODO = 'ADD_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';

6.To not always have to call the actions you can use Action Creators

import * as actions from './types';

export function addTodo(description) {
  return {
    type: actions.ADD_TODO,
    payload: {
      description,
    },
  };
}

export function removeTodo(id) {
  return {
    type: actions.REMOVE_TODO,
    payload: {
      id,
    },
  };
}

7.Use Action Creators
To use the action creators we call the store dispatch with the new created actions

store.dispatch(addTodo('First todo'));
store.dispatch(removeTodo(1));

In the next post i will show how to simplify this using redux toolkit. So stay tuned :)