DEV Community

loading...

React Tips — JWT and Redux, Run Code After setState and set Body Styles

aumayeung profile image John Au-Yeung Originally published at thewebdev.info ・3 min read

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

React is a popular library for creating web apps and mobile apps.

In this article, we’ll look at some tips for writing better React apps.

setState is One Step Behind onChange

To make sure that we set our state sequentially within a React component, we can pass in a callback as a 2nd argument of setState .

The callback is run when the value in the first argument is set as the new state value.

For instance, we can write:

handleChange(e) {
  this.setState({ name: e.target.value }, this.handleSubmit);
}
Enter fullscreen mode Exit fullscreen mode

We update the name state with our inputted value.

And then we call the handleSubmit method, which is a method that’s called after the name state is set.

In function components, we can write:

useEffect(() => {
  //...
}, [name]);
Enter fullscreen mode Exit fullscreen mode

to run the callback when the name state changes.

How to Sync Props to State using React Hooks

To sync prop values to state in a function component, we can use the useEffect hook to watch for prop value changes.

Then the callback we pass into the hook is run and when the prop value changes.

For instance, we can write:

import React,{useState , useEffect} from 'react';

const Persons = ({ name }) =>  {
  const [nameState , setNameState] = useState(name);

  useEffect(() => {
    setNameState(name);
  }, [name])

  return (
    <div>
       <p>My name is {props.name}</p>
       <p>My name is {nameState}</p>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

We have the Persons component that takes a name prop.

We set the initial state with the useState hook by passing in our prop value to it.

Then we added a useEffect hook to listen to the name value for changes.

If it changes, the callback is run.

We call setNameState to update the nameState with the latest name value.

Then we display both the prop and the state value.

Use Redux to Refresh a JSON Web Token

To use redux to refresh a JSON web token, we’ve to create a thunk and use the Redux thunk middleware.

To do that, we can write:

import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { reducer } from './reducer';

const rootReducer = combineReducers({
  reducer
  //...
})
const store = createStore(rootReducer, applyMiddleware(thunk));
Enter fullscreen mode Exit fullscreen mode

to apply the thunk middleware in our store.

Then we can create our reducer by witing:

reducer.js

const initialState = {
  fetching: false,
};

export function reducer(state = initialState, action) {
  switch(action.type) {
    case 'LOAD_FETCHING':
      return {
        ...state,
        fetching: action.fetching,
      }
   }
}
Enter fullscreen mode Exit fullscreen mode

We have a reducer that stores the fetching state.

Then we can create our think by writing:

export function loadData() {
  return (dispatch, getState) => {
    const { auth, isLoading } = getState();
    if (!isExpired(auth.token)) {
      dispatch({ type: 'LOAD_FETCHING', fetching: false })
      dispatch(loadProfile());
    } else {
      dispatch({ type: 'LOAD_FETCHING', fetching: true })
      dispatch(refreshToken());
    }
  };
}
Enter fullscreen mode Exit fullscreen mode

We created a thunk that calls dispatch and also gets the state to check if we need to get the token with the refresh token.

A thunk returns a function with the dispatch function to dispatch actions and getState to get the state.

And then we can dispatch the thunk by writing:

componentDidMount() {
  dispath(loadData());
}
Enter fullscreen mode Exit fullscreen mode

in our component.

There’s also the redux-api-middleware package that we can add as a middleware to our React app.

We can install it by running:

npm i redux-api-middleware
Enter fullscreen mode Exit fullscreen mode

Then we can create an action with it by writing:

import { createAction } from `redux-api-middleware`;

const getToken = () => createAction({
  endpoint: 'http://www.example.com/api/token',
  method: 'GET',
  types: ['REQUEST', 'SUCCESS', 'FAILURE']
})

export { getToken };
Enter fullscreen mode Exit fullscreen mode

type is a string that tells what action has occurred.

We also pass in the endpoint with the URL, and method with the request method.

We can add the middleware by writing:

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { apiMiddleware } from 'redux-api-middleware';
import reducers from './reducers';

const reducer = combineReducers(reducers);
const createStoreWithMiddleware = applyMiddleware(apiMiddleware)(createStore);

export default function configureStore(initialState) {
  return createStoreWithMiddleware(reducer, initialState);
}
Enter fullscreen mode Exit fullscreen mode

We import the reducers and the middleware and incorporate them into our store.

Then we can use the action that we created with createAction .

Conclusion

There are several ways to get a token with Redux.

Also, we can run code after setState is done.

And we can watch for prop value changes and update the state accordingly.

Discussion (0)

pic
Editor guide