
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-isomorphic-tools
Advanced tools
The first thing of motivation to make this library is an idea to gather together all features what my team is used in projects that we was designed in that time. The second thing it is that what I wanted to make just open source library to help people to decide own problems with which I faced. The third thing it is that I want grow up, and I want to involve more people to this project and that they are also can design auxiliary library is better.
react-isomorphic-example.k-3soft.com
Authentication it is stores current user data, you can rewrite this reducer for yourself
FetchData - it is common reducer that stores all fetched data from remote server
Navigator reducer needs to store info about browser what you are using and current locale
Modals - it is common reducer to store data about opening or closing modals window
// actions/authorization.js
import {fetcher} from 'react-isomorphic-tools'
import {AUTH_LOGIN_SUCCESS, AUTH_LOGOUT_SUCCESS} from 'react-isomorphic-tools/lib/constants'
const onSubmit = async (form) => dispatch => {
const user = await fetcher('/login', { //if your endpoint is returns object of current user we can catch it and put to store
method: 'POST',
params: {
login: form.login,
password: form.password
}
})
dispatch({
type: AUTH_LOGIN_SUCCESS,
payload: user
})
}
const logout = () => dispatch => {
dispatch({
type: AUTH_LOGOUT_SUCCESS // will remove current user from store
})
}
import {setLocale, setUserAgent} from 'react-isomorphic-tools'
//you can use it something like this
const defaultLocale = 'en'
const userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36
'
store.dispatch(setLocale(defaultLocale))
store.dispatch(setUserAgent(userAgent))
It's more neccessary for server side rendering to define locale and userAgent that rendering will properly
import {openModal, closeModal, closeAllModals} from 'react-isomorphic-tools'
const open = () => dispatch {
dispatch(openModal('test'))
}
const close = () => dispatch => {
dispatch(closeModal('test'))
}
const closeAll = () => dispatch => {
dispatch(closeAllModals())
}
There are two options how to use fetchData
// actions/posts.js
//// first
import {fetchToState} from 'react-isomorphic-tools'
const fetchItems = (userId) => dispatch => {
return dispatch(fetchToState('/posts', { // will return promise
key: 'posts',
method: 'GET',
params: {
filter:{
userId
}
}
}))
}
//// second
import {fetcher} from 'react-isomorphic-tools'
import {request, success, fail} from 'react-isomorphic-tools/lib/actions/fetchToState'
const fetchItems = async (userId) => dispatch => {
const key = 'posts'
const object = {
method: 'GET',
params: {
filter:{
userId
}
}
}
const url = '/posts'
try{
request({key, request {params: object.params, url}})
const posts = fetcher(url, object)) // will return promise
success({key, request {params: object.params, url}, response: posts})
}
catch(e){
dispatch(fail({key, e}))
}
}
Don't you seem that the first example is simpler?) Yes, the function fetchToState just wrapped fetcher but for it we need to define key, to tell reducer that we want to store data in defined key of store. It's simple, we want to make these things simpler!
// containers/posts.jsx
import React from 'react'
import {connect} from 'react-redux'
@connect(state=>({
posts: state.fetchData.posts && state.fetchData.posts.response || [] // you can subscribe to only response or...
postsObject: state.fetchData.posts || {} // subscribe to whole object, it includes response and request object
})
exoport default class PostsContainer extends React.Component {
render(){
console.log(this.props.posts)
console.log(this.props.postsObject)
return return null
}
}
FAQs
Authorization, Fetcher, Preload. Tools for ServerSide rendering
We found that react-isomorphic-tools demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.